element

2024-07-12 02:26| 来源: 网络整理| 查看: 265

el-table添加一行是很简单的操作 push 数据进数组就ok了但是想在原有的表上动态添加一列怎么办呢？在这里插入图片描述我是做了一个弹框去用于添加数据用

代码层的实现

HTML部分

重点部分 { columnItem }} --> {{ scope.row.goodsSpec }} {{ scope.row.goodsProperty1 }} {{ scope.row.mschannelCode }} {{ scope.row.goodsShowno }} {{ scope.row.pricesetNprice }} {{ scope.row.contractGoodsPrice }} {{ scope.row.pricesetNprice }} {{ scope.row.contractGoodsPrice }} {{ scope.row.goodsNum }} {{ scope.row.goodsCamount }} {{ scope.row.memberContactQq }} {{ scope.row.contractGoodsAppraise }} {{ scope.row.goodsDayinfo }} {{ scope.row.goodsProperty2 }} {{ scope.row.goodsProperty3 }} {{ scope.row.goodsProperty4 }} {{ scope.row.goodsSpec1 }} {{ scope.row.goodsProperty5 }}

展示一下代码结构会更加容易看一点是动态去加载el-table-column 然后其余部分用作用域插槽来实现在这里插入图片描述 data部分

tableColumns: [ { prop: 'goodsSpec', label: '原型机BOM', type: '', width: '150' }, { prop: 'goodsProperty1', label: '原型机型号', type: '', width: '150' }, { prop: 'mschannelCode', label: '生产BOM', type: '', width: '150' }, { prop: 'goodsShowno', label: '下单BOM', type: '', width: '150' }, { prop: 'goodsName', label: '下单型号', type: '', width: '150' }, { prop: 'pricesetNprice', label: '商品售价', type: '', width: '150' }, { prop: 'contractGoodsPrice', label: '减免后价格', type: '', width: '150' }, { prop: 'goodsNum', label: '修改后的数量', type: '', width: '150' }, { prop: 'goodsCamount', label: '原商品数量', type: '', width: '150' }, { prop: 'memberContactQq', label: '电源线适配器', type: '', width: '150' }, { prop: 'contractGoodsAppraise', label: '是否触发管控', type: '', width: '150' }, { prop: 'goodsDayinfo', label: '产品状态', type: '', width: '150' }, { prop: 'goodsProperty2', label: '制式', type: '', width: '150' }, { prop: 'goodsProperty3', label: '能耗', type: '', width: '150' }, { prop: 'goodsProperty4', label: '时区', type: '', width: '150' }, { prop: 'goodsSpec1', label: '维保年限', type: '', width: '150' }, { prop: 'goodsProperty5', label: '产品语言包', type: '', width: '150' }, ],

js部分

//添加列 submitBatchEvent() { if (this.BatchNew.includes('goods')) { let i = this.tableColumns.length i += 1 this.tableColumns.push({ prop: 'goods' + i, label: this.BatchNew, freightMoney: this.freightMoney, width: '150' }) console.log(this.tableColumns, 'tableColumnstableColumnstableColumnstableColumns') this.centerDialogVisible = false } else { this.$message.error('请填写规范批次号') } },

ps:此代码设计对应业务需求大家摘要看注意分析数据是怎么push进去的

this.tableColumns.push({ prop: 'goods' + i, label: this.BatchNew, freightMoney: this.freightMoney, width: '150' })

因为是自定义添加所以prop不可重复我这边是做了一个加一的逻辑处理来确保每次push的prop不一样

重点：若想自定义添加其他类型的数据可以在html部分自行添加用v-if+includes去判断我这里是限制了批次号名称的填写（也就是自定义列的名称）必须为goods开头才能识别你要添加的是什么数据类型我这里是input类型也就是说输入的内容只要包含goods就判定为你要添加的是inout类型想要添加其他数据类型与之方法相同

业务升级优化点定义自定义添加的数据类型每次需要前端手动去添加定义并且这种定义数据类型的方法是不是有点难受对于用户的使用体验不好学习成本也大（用input输入的内容来定义）所以我想到的是添加数据框来一个select框供用户去选择想要添加的数据类型

原型如下在这里插入图片描述选取selcet的value值赋给prop 嗯完美 ~~

原创不易且用且点赞支持一下吧~ 大佬们如果有更好的解决方案欢迎探讨交流哦

【本文地址】

公司简介

联系我们