我们在工作中,难免会遇到一些特殊的场景。比如动态表格的实现,主要的实现就是可以增加删除列,并且需要对数据进行验证。如何在vue中使用el-table添加一行删除一行并且验证必填呢?请看VCR
下面是代码示例:
<template>
<div style="display: flex;justify-content: center; align-items: center;height: 100%;margin-top: 200px;">
<el-card style="width:1000px;height:600px">
<el-button type="primary" size="small" style="display: flex;float: right;margin-bottom: 10px;" @click="AddTab">
<el-icon>
<Plus />
</el-icon>
添加一行
</el-button>
<el-form :model="addform" ref="addform" :rules="rules">
<el-table :data="addform.tableData" border height="450px">
<el-table-column type="index" label="序号" min-width="60"></el-table-column>
<el-table-column prop="productName" label="商品名称" min-width="180">
<template v-slot="scope">
<el-form-item :prop="'tableData[' + scope.$index + '].productName'" :rules="rules.productName">
<el-input v-model="scope.row.productName" placeholder="请输入商品名称"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="productType" label="商品类型" min-width="180">
<template v-slot="scope">
<el-form-item :prop="'tableData[' + scope.$index + '].productType'" :rules="rules.productType">
<el-select v-model="scope.row.productType" placeholder="请选择商品类型" clearable filterable>
<el-option value="1" label="春装"></el-option>
<el-option value="2" label="夏装"></el-option>
<el-option value="3" label="秋装"></el-option>
<el-option value="4" label="冬装"></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="productPrice" label="商品价格" min-width="180">
<template v-slot="scope">
<el-form-item :prop="'tableData[' + scope.$index + '].productPrice'" :rules="rules.productPrice">
<el-input v-model="scope.row.productPrice" type="number" placeholder="请输入商品价格"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作">
<template v-slot="scope">
<el-button type="danger" size="small" @click="DelTab(scope.row)">
<el-icon>
<Delete />
</el-icon>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
<div style="align-items: center;display: flex;justify-content: center;margin-top: 10px;">
<el-button type="primary" @click="SaveTab" size="small">保存</el-button>
</div>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
addform:{
tableData: [],
},
rules:{
productName:[{required: true, message: '请输入商品名称', trigger: 'blur' }],
productType:[{required: true, message: '请选择商品类型', trigger: 'change' }],
productPrice:[{required: true, message: '请输入商品价格', trigger: 'blur' }],
}
}
},
created() {
this.queryTable();
},
methods: {
//查询列表
async queryTable() {
//模拟后端传过来的数据
var result = [
{ id: 1, productName: '衬衫', productType: '1', productPrice: 60 },
{ id: 2, productName: '连衣裙', productType: '2', productPrice: 90 }
];
//赋值
this.addform.tableData = result;
},
//添加行
async AddTab() {
//获取表格最后一行的id
var pid = this.addform.tableData[this.addform.tableData.length - 1]?.id;
//添加行数据
var model = { id: pid + 1, productName: '', productType: '', productPrice: null }
this.addform.tableData.push(model)
},
//删除行
async DelTab(row) {
//filter过滤数据
this.addform.tableData = this.addform.tableData.filter(o => { return o.id != row.id })
},
async SaveTab(){
this.$refs.addform.validate(valid=>{
if(valid){
//---后端接口处理
this.$message.success("保存成功")
}
})
}
}
}
</script>
知识点
1)filter过滤,可以筛选掉不需要的数据this.addform.tableData.filter(o => { return o.id != row.id })。return后面限制要过滤的条件。
2)push插入。可以用来往数组里面插入数据。
3)this.$refs.addform.validate()必填验证,this.$refs指向el-form的ref,获取el-form的元素。实现rules的验证。
4):rules="rules"验证规则
5):prop="'tableData[' + scope.$index + '].productName'"为什么prop这样绑定而不是直接绑定productName。这是el-form记录的数据是单条数组,但是el-table记录的是多条数据的集合。所以我们要找到表格中的哪一行的输入框。所以使用scope.$index去找到tableData的行数据。
最后
标签:el,必填,addform,一行,tableData,productName,id From: https://blog.csdn.net/tomlostjack/article/details/140988704如果有哪里不懂的可以私信我。这个比较复杂,对初学者很不友好,但是对于刚开始工作的小伙伴有可能会有用。后续我会开一个专栏专门讲基础的vue.