个人网站的制作代码,北京软件研发公司,网络平台举报中心,免费做h5的平台本篇文章记录el-table增加一行可编辑的数据列#xff0c;进行增删改。 1.增加空白行
直接在页面mounted时对form里面的table列表增加一行数据#xff0c;直接使用push() 方法增加一列数据这个时候也可以设置一些默认值。比如案例里面的 产品件数 。 mounted() {this.$nextTi…本篇文章记录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 refaddFormRef :modeladdFormData :rulesaddFormRules sizemini :inlinetrueel-table tooltip-effectlight :dataaddFormData.productList el-table-column label产品名称 propproductName min-width150template slot-scopescopeel-form-item sizemini :propproductList. scope.$index .productName:rulesaddFormRules.productName classallel-select v-modelscope.row.productName filterable value-keyid placeholder请选择changepestChange($event, scope.$index)el-option v-foritem in optionsList :keyitem.id :labelitem.productName:valueitem/el-option/el-select/el-form-item/template/el-table-columnel-table-column label操作 aligncenter class-namesmall-padding fixed-width fixedrightwidth150template slot-scopescopeel-button sizemini typetext iconel-icon-edit clickhandleUpdateYes(scope.row)v-hasPermi[system:order:edit]增加/el-buttonel-button sizemini typetext iconel-icon-delete clickhandleDeleteProduct(scope.row)v-hasPermi[system:order:remove]删除/el-button/template/el-table-column/el-tableel-form-item sizelargeel-button typeprimary clickhandleSubmitAdd提交/el-buttonel-button clickhandleCancelAdd取消/el-button/el-form-item/el-formpestChange(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 refaddFormRef :modeladdFormData :rulesaddFormRules sizemini :inlinetrueel-table tooltip-effectlight :dataaddFormData.productList el-table-column label小计元 proptotalAmount width100template slot-scopescopediv classnotext{{ getTotalAmount(scope.row) }}/div/template/el-table-columnel-table-column label操作 aligncenter class-namesmall-padding fixed-width fixedrightwidth150template slot-scopescopeel-button sizemini typetext iconel-icon-edit clickhandleUpdateYes(scope.row)v-hasPermi[system:order:edit]增加/el-buttonel-button sizemini typetext iconel-icon-delete clickhandleDeleteProduct(scope.row)v-hasPermi[system:order:remove]删除/el-button/template/el-table-column/el-tableel-form-item sizelargeel-button typeprimary clickhandleSubmitAdd提交/el-buttonel-button clickhandleCancelAdd取消/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//校验通过 往下执行})},
