elment 中 el-table 進行校驗
阿新 • • 發佈:2018-12-14
腦洞大開:什麼是展示資料最好的方式呢,表格,寫得又快,又清晰,又明顯,那麼就積累一些工作中表格經常使用到的東西。
第一步:效果圖:
第二步:舉個例子:
<template> <div> <el-button type="primary" v-on:click="submitForm('ruleForm')">測試</el-button> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-table :data="ruleForm.tableData" style="width: 100%"> <el-table-column label="日期" width="280"> <template slot-scope="scope"> <el-form-item :prop="'tableData.' + scope.$index + '.date'" :rules="rules.test"> <el-input style="width:100%" v-model="scope.row.date"></el-input> </el-form-item> </template> </el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </el-form> </div> </template> <script> export default { data() { return { ruleForm: { tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀區金沙江路 1518 弄" }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀區金沙江路 1517 弄" }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀區金沙江路 1519 弄" }, { date: "2016-05-03", name: "王小虎", address: "上海市普陀區金沙江路 1516 弄" } ] }, rules: { test: [{ required: true, message: "請輸入日期", trigger: "change" }] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { alert("submit!"); } else { console.log("error submit!!"); return false; } }); } } }; </script>
< template > < div > < el-button type= "primary" v-on:click=" submitForm( 'ruleForm')" >測試 </ el-button > < el-form :model=" ruleForm" :rules=" rules" ref= "ruleForm" label-width