需求背景：
在表格中内嵌输入框，并对输入框进行规则校验。
模板结构上采用在el-table外层包上el-form来实现表单校验功能。
实现界面效果图大概如下：
这里有一点要求，只有勾选的行才需要进行非空以及其他校验。
解决思路
单元格的模板结构如下：
<el-form ref="tableForm" :model="tableForm" size="small">
<el-table :data="tableForm.tableData">
// ...
<el-table-column label="ID帧(hex)" width="150px">
<template slot-scope="scope">
<el-form-item :prop="`tableData.${scope.$index}.canId`" :rules="scope.row.checked ? rules.hexValue : rules.unknown">
<el-input v-model="scope.row.canId" placeholder="请输入" />
</el-form-item>
</template>
</el-table-column>
// ...
</el-table>
</el-form>
这里的关键代码就是rules属性，通过选中状态来切换hexValue跟unknown的规则。
rules对象如下：
rules: {
hexValue: [
{ required: true, message: '请输入', trigger: 'blur' },
{
pattern: /^[0-9a-fA-F]{8}$/,
message: '请输入8位十六进制数',
trigger: 'blur'
}
],
positiveInteger: [
{ required: true, message: '请输入非零正整数', trigger: 'blur' },
{
pattern: /^[1-9]\d*$/,
message: '请输入非零正整数',
trigger: 'blur'
}
],
unknown: [{ required: false, message: '请输入', trigger: 'blur' }]
}
到这里就能实现上述的效果。
求助
但是这里有一点想不通的就是unknown规则。当它为null或者空数组时，就实现不了想要的效果。希望知道的朋友帮我解惑？？
