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

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

2024-02-06 15:02:46 前端知识 前端哥 429 627 我要收藏

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.qianduange.cn//article/1462.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!