应用场景：
在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交，同时又需要对table的字段进行校验，效果如图所示：
这个校验中，最关键的问题在于如何给el-form-item 动态绑定prop。
:prop="'tableData.' + scope.$index + '.字段名'"
方法一：
submit
export default {
data() {
return {
fromData:{
domains:undefined
},
fromaDataRules:{
name:[{ required: true, message: '请输入', trigger: 'blur' }],
desc:[ { required: true, message: '请填写', trigger: 'blur' }]
},
domains:[],
}
},
mounted(){
this.initDomains()
},
methods:{
initDomains(){
this.domains=[
{
name: "小红",
desc: "11123"
},
{
name: "小红",
desc: "11123"
}
]
},
init(){
this.$set(this.fromData,'domains',this.domains)
},
submit(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
上述代码中比较关键的部分有一下两点：
1、:prop="‘domains.'+scope.$index+'.name'" ，用于动态绑定prop到el-form-item；
2、this.$set(this.fromData,‘domains',this.domains) ，用于为fromData设置domains这个节点。
方法二：
submit
export default {
data() {
return {
fromData:{
fromaDataRules:{
name:[{ required: true, message: '请输入', trigger: 'blur' }],
desc:[ { required: true, message: '请填写', trigger: 'blur' }]
},
domains:[],
},
}
},
mounted(){
this.initDomains()
},
methods:{
initDomains(){
this.fromData.domains=[
{
name: "小红",
desc: "11123"
},
{
name: "小红",
desc: "11123"
}
]
},
init(){
},
submit(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
补充知识：Vue+ElementUI 完整增删查改验证功能的表格
我就废话不多说了，大家还是直接看代码吧~
查询
新增
:data="tableData"
style="width: 100%"
border>
prop="date"
label="日期"
width="250">
prop="name"
label="姓名"
width="250">
prop="address"
label="地址"
width="350">
编辑
删除
确定
取消
data () {
return {
operation: true,
dialogVisible: false,
lineData: {},
editData: {},
query: '',
addRule: {
date: [{required: true, message: '请输入日期', trigger: 'blur'}],
name: [{required: true, message: '请输入名称', trigger: 'blur'}]
},
tableData: [{
id: 1,
date: '-05-02',
name: '王一虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '-05-04',
name: '王二虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 3,
date: '-05-01',
name: '王一虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 4,
date: '-05-03',
name: '王四虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
handleEdit (index, row) {
this.editData = JSON.stringify(row)
this.lineData = JSON.parse(this.editData)
this.dialogVisible = true
this.operation = false
},
handleDelete (index, row) {
this.tableData.splice(index, 1)
},
handleAdd () {
this.dialogVisible = true
this.operation = true
this.lineData = {}
this.lineData.id = Math.random()
},
handleSelect () {
if (this.query !== '') {
const tmpData = []
for (let item of this.tableData) {
if (item.name === this.query) {
tmpData.push(item)
}
}
this.tableData = tmpData
}
},
handleSave () {
this.$refs.lineData.validate((valid) => {
if (valid) {
this.addLine(this.lineData)
this.dialogVisible = false
} else {
alert('保存失败')
return false
}
})
},
handleCancel () {
this.dialogVisible = false
},
addLine (item) {
let existed = false
for (let i = 0; i < this.tableData.length; i++) {
if (this.tableData[i].id === item.id) {
this.tableData[i].id = item.id
this.tableData[i].name = item.name
this.tableData[i].address = item.address
this.tableData[i].date = item.date
existed = true
break
}
}
if (!existed) {
this.tableData.push(this.lineData)
}
}
}
}
.block{
width: 75%;
margin-left: 400px;
margin-top: 200px;
}
以上这篇使用element-ui +Vue 解决 table 里包含表单验证的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
