element el-table如何实现表格动态增加/删除/编辑表格行(带校验规则)
作者：优雅格子衫
这篇文章主要介绍了element el-table如何实现表格动态增加/删除/编辑表格行(带校验规则),本篇文章记录el-table增加一行可编辑的数据列,进行增删改,感兴趣的朋友跟随小编一起看看吧
本篇文章记录el-table增加一行可编辑的数据列，进行增删改。
1.增加空白行
直接在页面mounted时对form里面的table列表增加一行数据，直接使用push() 方法增加一列数据这个时候也可以设置一些默认值。比如案例里面的 产品件数 。
mounted() {
this.$nextTick(() => {
this.addFormData.productList.push({
productName: '',//产品名称
price: '',//单价(元/㎡)
productCount: '1', //产品件数
totalAmount: '', //小计￥元
})
})
},2.产品名称选中拿到数据展示到列表行
因为当前案例的产品名是下拉选择的，所以我们要请求接口拿到数据渲染到下拉列表，这里直接使用了假数据。
data() {
return {
addFormData: {
// 产品列表
productList: [],
},
addFormRules: {
productName: [{
required: true,
message: '请选择产品',
trigger: 'blur'
}],
price: [{
required: true,
message: '请输入单价',
trigger: 'blur'
}
],
productCount: [{
required: true,
message: '请输入产品件数',
trigger: 'blur'
}]
},
optionsList: [
{
id:1,
productName:'橘子',
price:'10',
},
{
id:2,
productName:'苹果',
price:'8',
}
]
}
},
<el-form ref="addFormRef" :model="addFormData" :rules="addFormRules" size="mini" :inline="true">
<el-table tooltip-effect="light" :data="addFormData.productList" >
<el-table-column label="产品名称" prop="productName" min-width="150">
<template slot-scope="scope">
<el-form-item size="mini" :prop="'productList.' + scope.$index + '.productName'"
:rules="addFormRules.productName" class="all">
<el-select v-model="scope.row.productName" filterable value-key="id" placeholder="请选择"
@change="pestChange($event, scope.$index)">
<el-option v-for="item in optionsList" :key="item.id" :label="item.productName"
:value="item">
</el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
width="150">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateYes(scope.row)"
v-hasPermi="['system:order:edit']">增加</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteProduct(scope.row)"
v-hasPermi="['system:order:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-form-item size="large">
<el-button type="primary" @click="handleSubmitAdd">提交</el-button>
<el-button @click="handleCancelAdd">取消</el-button>
</el-form-item>
</el-form>
pestChange(e, index) {
//此时的e 就是optionsList中的某一项
//让后解构赋值给我们这一行对应的值
let data = this.addFormData.productList[index]
Object.keys(data).forEach(key => {
data[key] = e[key]
})
this.addFormData.productList[index].productCount = 1
},3.小计通过(计算属性计算值)
<el-form ref="addFormRef" :model="addFormData" :rules="addFormRules" size="mini" :inline="true">
<el-table tooltip-effect="light" :data="addFormData.productList" >
<el-table-column label="小计￥元" prop="totalAmount" width="100">
<template slot-scope="scope">
<div class="notext">
{{ getTotalAmount(scope.row) }}
</div>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
width="150">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateYes(scope.row)"
v-hasPermi="['system:order:edit']">增加</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteProduct(scope.row)"
v-hasPermi="['system:order:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-form-item size="large">
<el-button type="primary" @click="handleSubmitAdd">提交</el-button>
<el-button @click="handleCancelAdd">取消</el-button>
</el-form-item>
</el-form>computed: {
getTotalAmount(){
return (data) => {
//先判断单价和数量必须存在
if (data.productCount && data.price) {
data.totalAmount = parseInt(data.productCount) * parseInt(parseFloat(data.price))
return data.totalAmount
} else {
return 0.00
}
}
}
},4.再增加一行复用上一行的数据
handleUpdateYes(row) {
//拿到上一行数据再往数组中push（）新的数据
this.addFormData.productList.push({
productName: row.productName,//产品名称
price: row.price,//单价(元/㎡)
productCount: row.productCount, //产品件数
totalAmount: '', //小计￥元
})
},5.删除某一行
// 删除产品
handleDeleteProduct(row) {
this.$confirm('此操作将永久删除该产品信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.addFormData.productList.splice(row.index, 1)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},6.点击提交对表单校验
// 添加订单表单提交
handleSubmitAdd() {
this.$refs.addFormRef.validate(async (valid) => {
if (!valid) return
//校验通过 往下执行
})
},到此这篇关于element el-table实现表格动态增加/删除/编辑表格行，带校验规则的文章就介绍到这了,更多相关element el-table表格动态增加内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！