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