elment-ui表格中的表單驗證
阿新 • • 發佈：2019-05-12
elment-ui提供表單驗證，而在實際中表格里也涉及表單驗證，其關鍵點在於如何給表格中需要驗證的欄位動態新增prop，再給其繫結規則。
<el-form :rules="ruleProcessForm.rules" :model="ruleProcessForm" ref="formProcess">
<el-table
:data="ruleProcessForm.processData"
tooltip-effect="dark"
style="width: 100%"
>
<el-table-column
label="工序名稱"
prop="processName"
>
<template slot-scope="scope">
<el-form-item :prop="'processData.' + scope.$index + '.processName'" :rules='ruleProcessForm.rules.processName'>
<el-select v-model="scope.row.processName"
@visible-change="getProcessNameInfo"
@change="processNameChange(scope.row)"
placeholder="工序名稱">
<el-option
v-for="item in processNameList"
:key="item.processId"
:label="item.processName"
:value="item.processName">
</el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
<script>
export default {
data () {
return {
formProcess:{
processName:"",
},
ruleProcessForm : {
rules: {
processName:[{ required: true, message: '請選擇工序名稱', trigger: 'change' }],
},
processData: []
}
}
},
methods: {
this.$refs["formProcess"].validate((valid,ruleProcessForm) => {
console.log(valid)
if (valid) {
}
}
}
}
</script>