【vue】element-ui、el-table使用V-for循环动态添加表头和数据

阅读本书更多章节>>>>

element-ui、el-table使用V-for循环动态添加表头和数据

tableHeader:'固定的表头'，

<el-table border style="width: 100%"      :header-cell-style="{ color: '#FFF', background: '#333' }"     :cell-style="{ color: '#FFF', background: '#333' }"      :default-sort="{ prop: 'stockNo', order: '' }"     :data="gridData"      id="pagetable"      ref="tableG"      :row-key="getRowKeys"      @selection-change="handleSelectionChange">   <template slot="empty">       <span style="color: #969799">{{ $t("NeoLight.empty") }}</span>   </template>    <el-table-column         type="selection"         width="50"         :reserve-selection="true"         :selectable="selectable" />    <el-table-column         v-for="(item, index) in tableHeader"         :prop="item.prop"         :key="index"         :label="item.label">    </el-table-column>    <el-table-column :label="$t('lockMaterial.abnormal')"         v-if="newStatus == 7">         <!-- 已出盘数<需求盘数或者已出数量<需求数量 都要显示异常的  -->        <template slot-scope="scope">            <span v-if="scope.row.outNum < scope.row.needNum || scope.row.outReelCount < scope.row.needReelCount">             {{ $t("storagePos.yes") }}</span>        </template>    </el-table-column></el-table>

data 中定义数据

 tableHeader: [{        label: window.vm.$i18n.t("workOrder.ri"),        prop: 'ri'      }, {        label: window.vm.$i18n.t("storagePos.mpn"),        prop: 'mpn'      },      {        label: window.vm.$i18n.t("solderPasteManager.pn"),        prop: 'pn'      },      {        label: window.vm.$i18n.t("workOrder.side"),        prop: 'side'      }        , {        label: window.vm.$i18n.t("workOrder.trolleyNumber"),        prop: 'tableNo'      }, {        label: window.vm.$i18n.t("workOrder.stationInfo"),        prop: 'feederInfo'      }, {        label: window.vm.$i18n.t("workOrder.needCount"),        prop: 'needReelCount'      }, {        label: window.vm.$i18n.t("workOrder.outCount"),        prop: 'outReelCount'      }, {        label: window.vm.$i18n.t("workOrder.demandQuantity"),        prop: 'needNum'      }, {        label: window.vm.$i18n.t("workOrder.quantityIssued"),        prop: 'outNum'      }      ],

表格中部分表头 需从接口返回的数据（appendData）中拿到

返回数据格式

组装数据

methods：{  toDetail(inde, row) {      this.dialogTableVisible = true;      orderDetail(row.orderNo).then((res) => {        let appendHeader = []        // 找到所有的appendData的值 放到一个数组里        let allAppendData = []        let allKeys = []        res.orderItems && res.orderItems.map(r => {          allAppendData.push(r.appendData)        })        // 获取到数组中每一项的key值        allAppendData.forEach((value, i) => { //数组循环          for (var pl in value) { //数组对象遍历            //获取key            allKeys.push(pl)          }        })        // 组装动态列新增的表头        appendHeader = allKeys.map(k => {          return {            label: k,            prop: k          }        })        if (!this.isAdd) {          this.tableHeader = this.tableHeader.concat(appendHeader)//组装b          this.isAdd = true        }        res.orderItems && res.orderItems.map(r => {          if (r.appendData) {            const keys = Object.keys(r.appendData)            keys.map(k => {              r[k] = r.appendData[k]            })          } else {            return r          }        })        this.gridData = res.orderItems      });    }, }

效果

点击需求单号 ，弹框

参考链接 https://blog.csdn.net/xz1589155358/article/details/126597271

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-02/152793.html，文章来源：网络cs，作者：利杜鹃，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！