WetEditableTable 可编辑表格

基本介绍

该组件是对 WetSchemaTable 的定制化封装,为了方便使用,给 WetSchemaTable 增加了一些预设.基本的columns 定义和WetSchemaTable相同

引入方法: import { WetEditableTable } from '@wetspace/pro-components';

基本使用

1. readonly ，全局控制可编辑表格是只读模式还是编辑模式
2. disabled ，全局控制可编辑表格是禁用模式还是编辑模式（编辑模式下生效）

受控编辑表格

1. 普通受控： 当组件属性controlled设置为true时，整个编辑表格就是受控编辑表格，默认初始化数据都是只读，并且操作栏有编辑选项，同时，表单填写的值必须通过保存按钮保存后，值方保存，否则输入的值无效

2. 自定义受控：

可编辑表格项联动

实现可编辑表格的表单联动，主要是使用可编辑表格的方法和暴露实例方法

1. 首先在WetEditTableColumn，上使用change方法监听值改变
2. 在change方法中使用WetEditableTable实例方法setRowData设置值即可

例子如下：

自定义可编辑表格

1. 自定义操作栏

   这部分是在表格列的配置项当中，设置valueType:'actions' 同时dataIndex也应该被设置为'actions'

   渲染提供了两种方式渲染，一种是函数式，需要使用vue的h函数（tsx模式不需要）；另一种，设置属性isRender:true,这样就可以使用名为:actions的插槽来渲染朝左栏，其中slot的scope作用域，提供了，row，index，actions三种属性，分别表示行数据，当前索引，数据操作对象（包括了，编辑，复制等一系列操作）

2. 自定义数据表格栏

   这部分分两个来看

   • 第一个，渲染只读模式下的，这个是使用render函数或者是isRender:true,然后使用插槽名为dataIndex字符串(如果dataindex是数组，这就是两个成员连接起来的字符串为插槽名)的插槽去渲染
   • 第二个，非只读模式下的表单项渲染，这里采用的是属性 renderFormField,指定一个标准表单项组件即可，如下面的例子，因为表格编辑中，很少有checkbox的场景，因此本组件的可编辑表格没有集成checkbox,当我们需要用这个组件时，做法就是用renderFormField属性指定,做法如下

属性

基本属性，参考WetSchemaTable组件

属性	描述	类型	默许值
modelValue/v-model	全局可编辑性控制	boolean	true
maxLength	全局表单项可用性控制	boolean	true
minLength	显示排序控制	boolean	true
controlled	显示头部新增删除按钮控制	boolean	true
addDefaultRow	显示单行操作控制	boolean	false
readonly	新增方法添加时，添加的默认成员值	object	null
disabled	绑定的value	arrary	null
clearable	clearable 的键名。 它可以是一个属性的值(如 a.b.0 或 ['a', 'b', '0'])	string | string[]	-

方法

方法	描述	类型	返回类型
change	值发生改变触发方法	Function	-
update:modelValue	值发生改变触发方法,用于双向绑定	Function	-
selectedRow	多选选中触发	Function	-
addAfter	添加后触发	Function	-
deleteAfter	删除后触发	Function	-

实例方法（Expose）

方法	描述	类型	返回类型
scrollToIndex	当表格有行超出隐藏时，使用该函数可以将指定行暴露在视野当中	(index: number) => any	-
add	表格行数据新增	Function	-
deleteRow	表格行数据删除,按当前表格数据位置删除	(index: number) => void	-
copy	复制行数据，第一个参数是行数据，第二个参数是复制后插入的位置	(row: any, index?: number) => void	-
saveRow	保存输入数据，在组件配置controlled参数后生效	saveRow: (row: any) => void	-
cancel	哪一行数据取消编辑状态，在组件配置controlled参数后生效	(row: any) => void	-
edit	编辑哪一行数据，在组件配置controlled参数后生效	(row: any) => void	-