vueelementtable中自定义一些input的验证操作

官⽹原话

Form 组件提供了表单验证的功能，只需要通过 rules 属性传⼊约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。表单

el-form表单必备以下三个属性：

:model=\"ruleForm\" 绑定的数据内容

:rules=\"rules\" 动态绑定的rules，表单验证规则ref=\"ruleForm\" 绑定的对象template模块

其实问题关键就在于如何给el-form-item动态绑定prop:prop=\"'tableData.' + scope.$index + '.字段名'\"

vuejs 代码

export default { name:'TestWorld', data() { return {

formData:{ rules:{ name:{

type:\"string\ required:true,

message:\"必填字段\ trigger:\"blur\" },

volume1:{

type:\"number\ required:true,

message:\"册数必须为数字值\ trigger:\"change\" },

data1:{

type:\"date\ required:true,

message:\"请选择⽇期\ trigger:\"change\" } },

tableData:[{ bookname: '', bookbuytime: '', bookbuyer: '', bookborrower: '', bookvolume:'' }] } } },

methods:{

addLine(){ //添加⾏数 var newValue = { bookname: '', bookbuytime: '', bookbuyer: '', bookborrower: '', bookvolume:'' };

//添加新的⾏数

this.formData.tableData.push(newValue); },

handleDelete(index){ //删除⾏数

this.formData.tableData.splice(index, 1) },

save(formName){ //保存

this.$refs[formName].validate((valid,model) => { console.log(valid)

console.log(JSON.stringify(model)) if (valid) {

alert('submit!'); } else {

console.log('error submit!!'); return false; } }); },

handleDelete(index){ //删除⾏数 console.log(index)

this.formData.tableData.splice(index, 1) } } }

补充知识：element-ui 跟form 和table 动态表单校验，数组的深层次校验

⾸先数据结构是这样的

let cchiCombineBill = [ {

infoId: '1716',

clinicCchiCombineName: '星期四', clinicCchiCombineId: '3', serviceCount: '1', cchis: [ {

cchiCode: 'CAAJ1000' }, {

cchiCode: 'CAAJ1400' } ] }, {

infoId: '1816',

clinicCchiCombineName: '星期五', clinicCchiCombineId: '3', serviceCount: '1', cchis: [ {

cchiCode: 'CAAJ1000' }, {

cchiCode: 'CAAJ1400' } ] } ]

之前⼀直是数组结合table ⼀层的校验，琢磨了很久才终于领悟 element-ui 的 form表单校验的精髓所在，

那就是 :prop ⼀定是遍历的数组'cchiCombineBill.' 加上（cchiCombineBill，index）中 的index，再加上具体要校验的字段。

以上这篇vue element table中⾃定义⼀些input的验证操作就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。