el-table添加一行是很简单的操作 push 数据进数组就ok了 但是想在原有的表上动态添加一列怎么办呢?
我是做了一个弹框去用于添加数据用
代码层的实现
HTML部分
<el-table
:data="goodsList1.slice((currentPage1 - 1) * pagesize1, currentPage1 * pagesize1)"
:row-style="{ height: '50px' }"
:default-sort="{ prop: 'goodsNum' }"
>
重点部分
<el-table-column
v-for="(columnItem, index) in tableColumns"
:key="index"
:prop="columnItem.prop"
:label="columnItem.label"
fit
:min-width="columnItem.width"
>
<template slot-scope="scope">
<!-- <span>{{ columnItem }}</span> -->
<span v-if="columnItem.label == '原型机BOM'">{{ scope.row.goodsSpec }}</span>
<span v-if="columnItem.label == '原型机型号'">{{ scope.row.goodsProperty1 }}</span>
<span v-if="columnItem.label == '生产BOM'">{{ scope.row.mschannelCode }}</span>
<span v-if="columnItem.label == '下单BOM'">{{ scope.row.goodsShowno }}</span>
<span v-if="columnItem.label == '商品售价'">{{ scope.row.pricesetNprice }}</span>
<span v-if="columnItem.label == '减免后价格'">{{ scope.row.contractGoodsPrice }}</span>
<span v-if="columnItem.label == '商品售价'">{{ scope.row.pricesetNprice }}</span>
<span v-if="columnItem.label == '减免后价格'">{{ scope.row.contractGoodsPrice }}</span>
<el-input
:key="1"
fixed="right"
sortable
v-if="columnItem.label == '修改后的数量' && !dataStatedisabled"
v-model.number="scope.row.goodsNum"
:max="scope.row.goodsNumber1"
@change="goodsNumBlur($event, scope.$index, scope.row)"
></el-input>
<span v-if="columnItem.label == '修改后的数量' && dataStatedisabled" :key="2" sortable>{{ scope.row.goodsNum }}</span>
<span v-if="columnItem.label == '原商品数量'">{{ scope.row.goodsCamount }}</span>
<span v-if="columnItem.label == '电源线适配器'">{{ scope.row.memberContactQq }}</span>
<span v-if="columnItem.label == '是否触发管控'">{{ scope.row.contractGoodsAppraise }}</span>
<span v-if="columnItem.label == '产品状态'">{{ scope.row.goodsDayinfo }}</span>
<span v-if="columnItem.label == '制式'">{{ scope.row.goodsProperty2 }}</span>
<span v-if="columnItem.label == '能耗'">{{ scope.row.goodsProperty3 }}</span>
<span v-if="columnItem.label == '时区'">{{ scope.row.goodsProperty4 }}</span>
<span v-if="columnItem.label == '维保年限'">{{ scope.row.goodsSpec1 }}</span>
<span v-if="columnItem.label == '产品语言包'">{{ scope.row.goodsProperty5 }}</span>
<el-input v-if="columnItem.label.includes('goods')"></el-input>
</template>
</el-table-column>
</el-table>
展示一下代码结构会更加容易看一点 是动态去加载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不一样
<el-input v-if="columnItem.label.includes('goods')"></el-input>
重点:若想自定义添加其他类型的数据可以在html部分自行添加 用v-if+includes去判断
我这里是限制了批次号名称的填写(也就是自定义列的名称)必须为goods开头 才能识别你要添加的是什么数据类型 我这里是input类型
也就是说输入的内容只要包含goods就判定为你要添加的是inout类型 想要添加其他数据类型与之方法相同
业务升级优化点
定义自定义添加的数据类型每次需要前端手动去添加定义 并且这种定义数据类型的方法是不是有点难受 对于用户的使用体验不好学习成本也大(用input输入的内容来定义)
所以我想到的是添加数据框来一个select框供用户去选择想要添加的数据类型
原型如下
选取selcet的value值 赋给prop 嗯 完美 ~~
原创不易 且用且点赞支持一下吧~
大佬们如果有更好的解决方案欢迎探讨交流哦