「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」。
首先使用Element Table表格框架代码对我们的模拟信息进行页面渲染
:data="tableData" 遍历tableData中的信息 stripe设置为带斑马纹表格 prop属性对应字段名
<el-table :data="tableData" stripe>
<el-table-column prop="date" label="日期" width="180"> </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>
data() {
return {
tableData: [{
date: '2022-01-01',
name: '王小虎',
address: '上海市普陀区'
},{
date: '2022-01-03',
name: '王大虎',
address: '长沙市岳麓区'
}]
}
},
目前显示页面效果
我们现在对表格进行添加信息操作，将输入的信息存入tableData中，并显示在页面，首先创建一个form表单进行添加
其中inline 属性可以让表单域变为行内的表单域， 创建一个空的formData来接收输入的内容，使用 v-model进行输入框的绑定
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="formData.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item label="地址">
<el-input type="textarea" v-model="formData.address" placeholder="地址"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="add">添加</el-button>
</el-form-item>
</el-form>
输入完成后执行add方法，进行添加操作，在将输入框内容添加进tableData之前，对日期进行格式的转换，如果需要多次在不同的地方进行转换的话，可以使用过滤器进行管理（ Vue.filter ）
add() {
var date = new Date()
var y = date.getFullYear();
var m = ( date.getMonth()+1 ).toString().padStart(2, '0');
var d = date.getDate();
var now = `${y}-${m}-${d}`
this.tableData.push({
name: this.formData.name,
address: this.formData.address,
date: now
});
this.formData.name = this.formData.address = '';
},
el-form还有一个很有意思的表单验证，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item的 prop 属性设置为需校验的字段名就可以实现
改变el-form的表头
<el-form ref="FormRef" :rules="FromRules" :model="formData" :inline="true" class="demo-form-inline">
分别给name 和 address 加上<el-form-item label="姓名" prop="name"> prop属性
在data中添加表单的验证规则对象
FromRules: {
name: [
{ required: true, message: "请输入姓名", trigger: "blur" },
],
address: [
{ required: true, message: "请输入地址", trigger: "blur" }
]
}
在添加之前执行判断，如果符合验证规则就执行添加操作否则直接返回，验证规则会自动弹出错误提示
add() {
this.$refs.FormRef.validate(async (vaild) => {
if (!vaild) {
return;
}else{
巴拉巴拉执行添加
}
}
有了校验我们就不会出现空白字段存入了
最后效果：
