elment 中 el-table 进行校验
Posted dzzzz
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了elment 中 el-table 进行校验相关的知识，希望对你有一定的参考价值。
脑洞大开：什么是展示数据最好的方式呢，表格，写得又快，又清晰，又明显，那么就积累一些工作中表格经常使用到的东西。
第一步：效果图：
第二步：举个例子：
<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="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>
以上是关于elment 中 el-table 进行校验的主要内容，如果未能解决你的问题，请参考以下文章