编辑表格使用YchEditableTable组件，使用之前需要引入该组件。
引入组件示例如下：
| …… import YchEditableTable from ‘@/components/ych/YchEditableTable’ …. export default { ….. components: { YchEditableTable, }, …. |
编辑表格使用示例如下：
| <ych-editable-table ref=”ychDemoContractSubject” :columns=”subTableConfig.ychDemoContractSubject.columns” :dataSource=”subTableConfig.ychDemoContractSubject.dataSource” :rowNumber=”true” :rowSelection=”true” :actionButton=”true” :disabled=”false” :maxHeight=”tableMaxheight” > </ych-editable-table> |
【columns】
类型：array
必填：是
说明：表格列的配置描述，具体参见1、columns参数详解
【dataSource】
类型：array
必填：是
说明：表格数据
【loading】
类型：boolean
必填：否
说明：是否正在加载，加载中不会显示任何行，默认false
【actionButton】
类型：boolean
必填：否
说明：是否显示操作按钮，包括”新增”、”删除”，默认false
【rowNumber】
类型：boolean
必填：否
说明：是否显示行号，默认false
【rowSelection】
类型：boolean
必填：否
说明：是否可选择行，默认false
【dragSort】
类型：boolean
必填：否
说明：是否可拖动排序，默认false
【dragSortKey】
类型：string
必填：否
说明：拖动排序存储的Key，无需定义在columns内也能在getValues()时获取到值，默认orderNum
【maxHeight】
类型：number
必填：否
说明：设定最大高度(px)，默认400
【disabledRows】
类型：object
必填：否
说明：设定禁用的行，被禁用的行无法被选择和编辑，配置方法可以查看示例
【disabled】
类型：boolean
必填：否
说明：是否禁用所有行，默认false
【title】
类型：string
必填：是
说明：表格列头显示的问题
【key】
类型：string
必填：是
说明：列数据在数据项中对应的 key，必须是唯一的
【type】
类型：string
必填：是
说明：表单的类型，可以通过YchEditableTableUtil.FormTypes赋值
【width】
类型：string
必填：否
说明：列的宽度，可以是百分比，也可以是px或其他单位，建议设置为百分比，且每一列的宽度加起来不应超过100%，否则可能会不能达到预期的效果。留空会自动计算百分比
【placeholder】
类型：string
必填：否
说明：表单预期值的提示信息，可以使用${…}变量替换文本（详见${…} 变量使用方式）
【defaultValue】
类型：string
必填：否
说明：默认值，在新增一行时生效
【validateRules】
类型：array
必填：否
说明：表单验证规则
validateRules 需要的是一个数组，数组里每项都是一个规则，规则是object类型，规则的各个参数如下
// 该示例是自定义函数校验
columns: [
{
title: '字段名称',
key: 'dbFieldName',
type: FormTypes.input,
defaultValue: '',
validateRules: [
{
// 自定义函数校验 handler
handler(type, value, row, column, callback, target) {
// type 触发校验的类型（input、change、blur）
// value 当前校验的值
// callback(flag, message) 方法必须执行且只能执行一次
// flag = 是否通过了校验，不填写或者填写 null 代表不进行任何操作
// message = 提示的类型，默认使用配置的 message
// target 行编辑的实例对象
if (type === 'blur') {
if (value === 'abc') {
callback(false, '${title}不能是abc') // false = 未通过，可以跟自定义提示
return
}
let { values } = target.getValuesSync({ validate: false })
let count = 0
for (let val of values) {
if (val['dbFieldName'] === value) {
if (++count >= 2) {
callback(false, '${title}不能重复')
return
}
}
}
callback(true) // true = 通过验证
} else {
callback() // 不填写或者填写 null 代表不进行任何操作
}
},
message: '${title}默认提示'
}
]
},
]
validateRules使用示例如下：
import { FormTypes } from '@/utils/YchEditableTableUtil'
/*--- 忽略部分代码片断 ---*/
columns: [
{
title: '名称',
key: 'name',
type: FormTypes.input,
placeholder: '请输入${title}',
defaultValue: '称名',
// 表单验证规则
validateRules: [
{
required: true, // 必填
message: '${title}不能为空' // 提示的文本
},
{
pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则
message: '${title}必须以字母开头，可包含数字、下划线、横杠'
}
]
},
{
title: '年龄',
key: 'age',
type: FormTypes.inputNumber,
placeholder: '请输入${title}',
defaultValue: 18,
validateRules: [{required: true, message: '${title}不能为空'}]
}
]
/*--- 忽略部分代码片断 ---*/
【props】
类型：object
必填：否
说明：设置添加给表单元素的自定义属性，例如:props:{title: ‘show title’}
【disabled】
类型：boolean
必填：否
说明：是否禁用当前列，默认false
【defaultChecked】
类型：boolean
必填：否
说明：默认值是否选中
【customValue】
类型：array
必填：否
说明：自定义值，checkbox需要的是boolean值，如果数据是其他值（例如’Y’ or ‘N’）时，就会导致错误，所以提供了该属性进行转换，例：customValue: [‘Y’,’N’]，会将true转换为’Y’，false转换为’N’，反之亦然
【options】
类型：array
必填：是
说明：下拉选项列表
列表项属性
【text】
类型：String
必填：是
说明：显示标题
【value】
类型：String
必填：是
说明：值
Options使用示例如下：
columns: [
//省略....
{
type:"select",
key:"rbVehicleType",
title:"交通工具",
width:"",
defaultValue:"",
disabled:false,
align:"center",
validateRules:[],
options:[
{
"value":"1",
"label":"火车"
},
{
"value":"2",
"label":"飞机"
},
]
},
//省略....
],
【slotName】
类型：string
必填：是
说明：slot的名称
【added】
触发时机：当添加行操作完成后触发
【deleted】
触发时机：当删除行操作完成后触发（批量删除操作只会触发一次）
参数：deleteIds 被逻辑删除的id
【selectRowChange】
触发时机：当行被选中或取消选中时触发
参数：selectedRowIds 被选中行的id
【valueChange】
触发时机：当数据发生改变的时候触发的事件
参数：{ type, row, column, value, target } Event对象
调用示例：
比如表格ref=”editableTable”，那么在vue中就可以使用this.$refs.editableTable获取到该表格的实例，并调取其中的方法，如下所示：
this.$refs.editableTable.initialize()
【initialize】
参数：无
返回值：无
说明：用于初始化表格（清空表格）
【resetScrollTop】
参数：
【top】
类型：number
必填：否
说明：新top位置，留空则滚动到上次记录的位置，用于解决切换tab选项卡时导致白屏以及自动将滚动条滚动到顶部的问题
返回值：无
说明：重置滚动条Top位置
【add】
参数：
【num】
类型：number
必填：否
说明：添加几行，默认为1
【forceScrollToBottom】
类型：boolean
必填：否
说明：是否在添加后无论用户的滚动条在什么位置都强制滚动到底部，默认为false
返回值：无
说明：主动添加行，默认情况下，当用户的滚动条已经在底部的时候，会将滚动条固定在底部，即添加后无需用户手动滚动，而会自动滚动到底部
【removeRows】
参数：
【id】
类型：string 或 array
必填：是
说明：被删除行的id。如果要删除一个，可以直接传id，如果要删除多个，需要将多个id封装成一个数组传入
返回值：无
说明：主动删除一行或多行
【removeSelectedRows】
参数：无
返回值：无
说明：主动删除被选中的行
【getValues】
参数：
【callback】
类型：function
必填：是
说明：获取值的回调方法，会传入error和values两个参数。error：未通过验证的数量，当等于0时代表验证通过；values：获取的值（即使未通过验证该字段也有数据）
【validate】
类型：boolean
必填：否
说明：是否进行表单验证，默认为true，设为false则代表忽略表单验证
【rowIds】
类型：array
必填：否
说明：默认返回所有行的数据，如果传入了rowIds，那么就会只返回与该rowIds相匹配的数据，如果没有匹配的数据，就会返回空数组
返回值：无
说明：用于获取表格里所有表单的值，可进行表单验证
【getValuesSync】
参数：
【options】
类型：object
必填：是
options所需参数：
【validate】
类型：boolean
必填：否
说明：是否进行表单验证，默认为true，设为false则代表忽略表单验证
【rowIds】
类型：array
必填：否
说明：默认返回所有行的数据，如果传入了rowIds，那么就会只返回与该rowIds相匹配的数据，如果没有匹配的数据，就会返回空数组
返回值：object
object属性
error: 未通过验证的数量，当等于0时代表验证通过
values: 获取的值（即使未通过验证该字段也有数据）
说明：getValues的同步版，会直接将获取到的数据返回
getValuesSync使用示例：
let { error, values } = this.$refs.editableTable.getValuesSync({ validate: true, rowIds: ['rowId1', 'rowId2'] })
if (error === 0) {
console.log('表单验证通过，数据：', values);
} else {
console.log('未通过表单验证，数据：', values);
}
【getValuesPromise】
参数：
【validate】
类型：boolean
必填：否
说明：同getValues的validate参数
【rowIds】
类型：array
必填：否
说明：默认返回所有行的数据，如果传入了rowIds，那么就会只返回与该rowIds相匹配的数据，如果没有匹配的数据，就会返回空数组
返回值：Promise
说明：getValues的promise版，会在resolve中传入获取到的值，会在reject中传入失败原因，例如VALIDATE_NO_PASSED
【getDeleteIds】
参数：无
返回值：array
说明：用于获取被逻辑删除的行的id，返回一个数组，用户可将该数组传入后台，并进行批量删除
【getAll】
参数：
【validate】
类型：boolean
必填：否
说明：同getValues的validate参数
返回值：Promise
说明：获取所有的数据，包括values、deleteIds
会在resolve中传入获取到的值：{values, deleteIds}
会在reject中传入失败原因，例如VALIDATE_NO_PASSED
【setValues】
参数：
【values】
类型：array
必填：否
说明：传入一个数组，数组中的每项都是一行的新值，具体见下面的示例
返回值：无
说明：主动设置表格中某行某列的值
setValues使用示例：
setValues([
{
rowKey: id1, // 行的id
values: { // 在这里 values 中的 name 是你 columns 中配置的 key
'name': 'zhangsan',
'age': '20'
}
},
{
rowKey: id2,
values: {
'name': 'lisi',
'age': '23'
}
}
])
在placeholder和message这两个属性中可以使用${…}变量来替换文本。
使用示例如下：
import { FormTypes } from '@/utils/JEditableTableUtil'
/*--- 忽略部分代码片断 ---*/
columns: [
{
title: '名称',
key: 'name',
type: FormTypes.input,
placeholder: '请输入${title}',
defaultValue: '称名',
// 表单验证规则
validateRules: [
{
required: true, // 必填
message: '${title}不能为空' // 提示的文本
},
{
pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则
message: '${title}必须以字母开头，可包含数字、下划线、横杠'
}
]
},
{
title: '年龄',
key: 'age',
type: FormTypes.inputNumber,
placeholder: '请输入${title}',
defaultValue: 18,
validateRules: [{required: true, message: '${title}不能为空'}]
}
]
/*--- 忽略部分代码片断 ---*/
在该示例中，配置了title为名称的一列，而placeholder配置成了请输入${title}，那么最终显示效果为请输入名称 这就是${…}变量的使用方式，在${}中可以使用的变量有title、key、defaultValue这三个属性的值