Element UI Pro Components

# EditableProTable - 可编辑表格

可编辑表格 EditableProTable 与 ProTable 的功能基本相同，为了方便使用 EditableProTable，增加了一些预设，关掉了查询表单和操作栏。

# 在线示例
# 基础用法

# API

EditableProTable 在 el-table 上进行了一层封装，支持了一些预设。这里只列出与 el-table 不同的 API。

# EditableProTable Attributes
参数 说明 类型 默认值
dataSource el-table 的数据 T[] undefined
recordCreatorProps 新建一行数据的相关配置 boolean | RecordCreatorProps -
maxLength 最大的行数，到达最大行数新建按钮会自动消失 number -
editable 可编辑表格的相关配置 TableRowEditable -
rowKey 行数据的 Key string -
name 可编辑表格嵌入表单时，需要校验时必填 string -
className 组件内 el-table 的类名 string -
loading 表格数据请求加载状态 boolean -
tableProps el-table attributes 的配置 TableProps -
tableEvents el-table events 的配置 TableEvents -
columns 列定义 columnsConfig[] -
defaultSize 默认的 size medium | small | mini -
sticky 设置为 true 时，默认用 position: sticky 实现。设置为 false 则是 el-table 原生实现 boolean true

dataSource 因引用类型这一特性，父组件表格数据随子组件进行 vue 数组响应式方法自动更新。

el-table 固定列原生实现方式会触发多次渲染，因此底层添加了 position: sticky 的实现。

# EditableTable Methods
参数 说明 类型 默认值
getFormRef 获取 el-form 的 ref，如果是内嵌到外部的 el-form，则返回的是外部的 el-form () => ref -
getTableRef 获取 el-table 的 ref () => ref -
validate el-form 的 validate 方法 Function(callback: Function(boolean, object)) -
validateRow 自定义的校验一行的方法 (index: number) => Promise<boolean> -
reset el-form 的 resetFields 方法 () => Promise<void> -
getRowData 获取一行数据 (rowIndex: string | number) => T | undefined -
getRowsData 获取整个 table 的数据 () => T[] | undefined -
setRowData 设置一行的数据 (rowIndex: string | number, data: Partial<T>) => void -
/**
  * 新增一行的方法
  * @param record
  * @param {Object} newLine 新增一行的配置
  * @param {string} newLine.position 顶部添加还是末尾添加
  * @param {string} newLine.newRecordType 新增一行的方式
  * @returns T | undefined
  */
addEditRecord?: (record: T, newLine: Partial<RecordCreatorProps>) => void;
/**
  * 获取一行数据
  * @param rowIndex
  * @returns T | undefined
  *
  * @example getRowData(1)  可以传入第几行的数据
  * @example getRowData("id")  也可以传入 rowKey，根据你列的唯一key 来获得。
  */
getRowData?: (rowIndex: string | number) => T | undefined;
/**
  * 获取整个 table 的数据
  * @returns T[] | undefined
  */
getRowsData?: () => T[] | undefined;
/**
  * 设置一行的数据，会将数据进行简单的 merge
  *
  * {title:"old", decs:"old",id:"old"} -> set {title:"new"} -> {title:"new", decs:"old",id:"old"}
  *
  * @description 只会做最第一层对象的 merge 哦。
  * {title:"old", decs:{name:"old",key:"old"},id:"old"} -> set { decs: { name:"new" } } -> {title:"old", decs:{name:"new"},id:"old"} -> set { decs: { name: "old" } }
  *
  * @param rowIndex
  * @param data
  * @returns void
  *
  * 根据行号设置
  * @example setRowData(1, { title:"new" })  可以传入修改第几行
  *
  * 根据行 id 设置
  * @example setRowData("id", { title:"new" })  也可以传入 rowKey，根据你列的唯一 key 来设置。
  *
  * 清空原有数据
  * @example setRowData(1, { title:undefined })
  *
  */
setRowData?: (rowIndex: string | number, data: Partial<T>) => void;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
# RecordCreatorProps

为了使用，预设了一个新建的功能，大多数情况下已经可以满足大部分新建的需求。与 Pro 系列组件的 API 相同，recordCreatorProps: false 就可以关掉按钮。

参数 说明 类型 默认值
position 顶部添加还是末尾添加 top | bottom bottom
newRecordType 新增一行的方式，默认是缓存，取消后就会消失。设置为 dataSource，取消后也不会消失，只能删除 dataSource | cache cache
record 新增行的默认值 DataSourceType | ((index: number, dataSource: DataSourceType[]) => DataSourceType) -
creatorButtonText 设置按钮文案 string 添加一行数据
style 按钮的样式设置，可以设置按钮是否显示，这样可以做最大行限制和最小行限制之类的功能 object -
buttonProps el-button 的属性 ButtonProps -
onlyAddOneLineAlertMessage 只能同时新增一行的提示，newRecordType 设置 cache 时会校验 string 只能新增一行

新增一行的时候要保证 recordCreatorProps.record key 唯一，不然会导致编辑出错。

<EditableProTable
  rowKey="id"
  :recordCreatorProps={
    // 每次新增的时候需要Key
    record: () => ({ id: getNewId() }),
  }
/>
1
2
3
4
5
6
7
# TableRowEditable
参数 说明 类型 默认值
type 可编辑表格的类型，单行编辑或者多行编辑 single | multiple single
editableKeys 正在编辑的行，受控属性。 默认 key 会使用 rowKey 的配置，如果没有配置会使用 index，建议使用 rowKey Key[] -
onChange 行数据被修改的时候触发 (editableKeys: Key[], editableRows: T[]) => void -
onSave 保存一行的时候触发 (recordKey: Key, editRow: T, originRow: T) => Promise<any> -
saveText 保存一行的文字 string 保存
onDelete 删除一行的时候触发 (recordKey: Key, editRow: T) => Promise<any> -
deleteText 删除一行的文字 string 删除
onCancel 取消编辑一行时触发 (recordKey: Key, editRow: T, originRow: T) => Promise<any> -
cancelText 取消编辑一行的文字 string 取消
actionRender 自定义编辑模式的操作栏 (row: T, config: ActionRenderConfig<T>, defaultDom) => jsx[] -
deletePopconfirmMessage 删除时弹出的确认框提示消息 string 删除此项？
onlyOneLineEditorAlertMessage 只能编辑一行的的提示 string 只能同时编辑一行
interface LineConfig {
  defaultValue?: T;
  options: {
    position?: 'top' | 'bottom';
    recordKey?: RecordKey;
    newRecordType?: 'dataSource' | 'cache';
  }
}

interface ActionRenderConfig {
  editableKeys?: RowEditableConfig<T>['editableKeys'];
  setEditableRowKeys: (value: React.Key[]) => void;
  recordKey: RecordKey;
  preEditRow: T;
  index?: number;
  onSave: RowEditableConfig<T>['onSave'];
  onDelete?: RowEditableConfig<T>['onDelete'];
  onCancel: RowEditableConfig<T>['onCancel'];
  cancelEditable: (key: RecordKey) => void;
  newLineConfig?: LineConfig;
  saveText?: React.ReactNode;
  deleteText?: React.ReactNode;
  cancelText?: React.ReactNode;
  deletePopconfirmMessage: RowEditableConfig<T>['deletePopconfirmMessage'];
  addEditRecord?: (row: T, options?: AddLineOptions) => boolean;
  tableName?: String;
}

// 分别对应保存、删除、取消按钮
const { save, delete, cancel } = defaultDom
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# columnsConfig 列定义

支持 el-table-column attributes 新增了以下 API。

参数 说明 类型 默认值
formItemProps el-form-item attributes 的配置 FormItemProps -
valueType 表单元素类型，会生成不同的渲染器。设置 slot 表示自定义，可选 valueType | slot -
renderField 自定义表单元素，可选 ({ form, formItem, recordKey, index }) => jsx -
fieldProps 表单元素的 attributes。如果渲染出来的是 el-input，则对应 el-input 的 attributes object -
fieldEvents 表单元素的 events。如果渲染出来的是 el-input，则对应 el-input 的 events object -
options 选择器、单选框组、多选框组 的数据 Array -
valueEnum 选择器枚举，方便自动生成选项 valueEnum -
optionLoader 异步生成 选择器、级联选择器 下拉数据 () => Promise<any> -
hideInTable 在 el-table 中不展示此项 boolean -
renderCellHeader 自定义表格标题 () => jsx -
renderCell 自定义表格内容，操作栏多一个 action (scope, action?: ActionConfig) => jsx | jsx[] -
editable 是否可编辑 (cellValue, record, index) => boolean -
readonly 只读 boolean -
key 组件的 key，可选 string -

表单元素绑定的是 column 的 prop，formItemProps 的 label 属性不支持，推荐写 rules 等校验配置,。

操作栏需要配置 valueType: 'option'。

renderField 自定义渲染因为没有 v-model，是值的传递，因此需要在 RecordCreatorProps.config 里进行初始化。

fieldEvents 封装了一层，添加了一个额外的 options 对象实参，包含了 recordKey、row 和 index 等 key。

选择器配置 valueEnum 或 options 在表格中会自动回显 label 值。

interface ActionConfig {
  startEditable: (rowKey: React.Key) => boolean; // 开始编辑指定字段
  cancelEditable: (rowKey: React.Key) => Promise<boolean>; // 取消编辑
  addEditRecord: (record: T, newLine: Partial<RecordCreatorProps>) => void; // 新增一行
}
1
2
3
4
5
# valueType slot
name 描述
[prop] 自定义表单元素，参数为 ({ form, formItem, recordKey, index })

←