element-ui之el-table改造 动态自定义添加列项

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 嗯 完美 ~~

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