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

这篇具有很好参考价值的文章主要介绍了【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）中拿到

返回数据格式

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

组装数据

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
      });
    },
 }