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

这篇具有很好参考价值的文章主要介绍了【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循环动态添加表头和数据

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

效果

点击需求单号 ,弹框

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

参考链接 https://blog.csdn.net/xz1589155358/article/details/126597271文章来源地址https://www.toymoban.com/news/detail-509718.html

到了这里,关于【vue】element-ui、el-table使用V-for循环动态添加表头和数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包