# 扩展的渲染插件

除了内置antd插件外，sula还基于antd实现了使用高频的扩展插件。

# 表单插件

# edittable

可编辑表格插件

示例：

fields: [
  {
    name: "edittable",
    label: "可编辑表格（edittable）",
    render: {
      type: "edittable",
      props: {
        fields: [
          {
            name: "name",
            label: "Name",
            render: "input"
          },
          {
            name: "age",
            label: "Age",
            render: {
              type: "inputnumber",
              props: {
                style: { width: "100%" }
              }
            }
          }
        ],
        columns: [
          {
            key: "name",
            title: "Name"
          },
          {
            key: "age",
            title: "Age"
          }
        ]
      }
    }
  }
];

属性名	说明	类型	默认值
value	表格的值	`Array`	-
fields	弹框表单设置，同sula-form fields	`Array`	-
columns	表格列设置，同sula-table columns，非禁用状态会添加操作列	`Array`	-
modalFormProps	弹框表单配置，同sula-form	FormProps	`{}`
tableProps	表格的设置，同sula-table	TableProps	`{}`
disabled	是否禁用	`boolean`	-
onChange	作为组件使用时，表格值变化时的回调	`(value) => void`	-
rowKeyName	表格中数据的唯一id	`string`	'__rowKey'

作为组件使用：

import { EditTable } from "@sula/plugin-render";

<EditTable
  onChange={(newDataSource) => {
    setDataSource(newDataSource);
  }}
  value={dataSource}
  columns={[
    {
      key: "name",
      title: "Name"
    },
    {
      key: "age",
      title: "Age"
    }
  ]}
  fields={[
    {
      render: "input",
      label: "Name",
      name: "name"
    },
    {
      render: {
        type: "inputnumber",
        props: {
          style: { width: "100%" }
        }
      },
      label: "Age",
      name: "age"
    }
  ]}
/>;

# tagfilter

标签过滤插件

示例：

fields: [
  {
    name: "edittable",
    label: "可编辑表格（edittable）",
    render: {
      type: "edittable",
      props: {
        fields: [
          {
            name: "name",
            label: "Name",
            render: "input"
          },
          {
            name: "age",
            label: "Age",
            render: {
              type: "inputnumber",
              props: {
                style: { width: "100%" }
              }
            }
          }
        ],
        columns: [
          {
            key: "name",
            title: "Name"
          },
          {
            key: "age",
            title: "Age"
          }
        ]
      }
    }
  }
];

属性名	说明	类型	默认值
value	当前选中项	`string\|string[]`	-
soure	数据源	`{text: string, value: string}[]`	-
mode	单选还是多选，默认单选	`multiple`	-
disabled	是否禁用	`boolean`	false
disableCopy	是否禁用复制	`boolean`	false
onChange	作为组件使用时，表格值变化时的回调	`(value: string\|string[]) => void`	-

作为组件使用：

import { TagFilter } from "@sula/plugin-render";

<TagFilter
  source={[
    {
      text: '苹果',
      value: 'apple',
    },
    {
      text: '桃子',
      value: 'peach',
    },
  ]}
/>

← 渲染插件行为插件 →