脑洞大开:什么是展示数据最好的方式呢,表格,写得又快,又清晰,又明显,那么就积累一些工作中表格经常使用到的东西。
第一步:效果图:
第二步:举个例子:
<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>