element-ui表头动态渲染

最新推荐文章于 2024-08-15 16:23:44 发布

正一品程序员

最新推荐文章于 2024-08-15 16:23:44 发布

阅读量870

点赞数 2

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_46060121/article/details/124889476

版权

该博客展示了如何在Vue.js中使用el-table组件动态生成表格列，并根据数据进行处理。代码示例中，通过`v-for`循环FBAColumns数组来创建表格列，并在`mounted`钩子中填充表头和处理tableData中的RangePrice数据，将价格信息映射到对应列。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<template>
  <el-table :data="tableData" style="width: 100%" border>
    <el-table-column prop="CharacterPostCode" label="编码" width="180"> </el-table-column>
    <el-table-column prop="Remarks" label="备注" width="180"> </el-table-column>
    <el-table-column v-for="(item,index) in FBAColumns" :prop="item.prop" :label="item.label"> </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      /* tableData中的每一项RangePrice都要是一样的 */
      tableData: [
        {
          CharacterPostCode: 'BHX1',
          RangePrice: [{ Range: '0-20(CBM)', Price: 2050.0 }, { Range: '20以上(CBM)', Price: 2000.0 }],
          FbaServiceType: 1,
          Remarks: '优先级最低,不能匹配其它报价方案时执行'
        },
        {
          CharacterPostCode: 'BHX2',
          RangePrice: [{ Range: '0-20(CBM)', Price: 2050.0 }, { Range: '20以上(CBM)', Price: 2000.0 }],
          FbaServiceType: 1,
          Remarks: '优先级最低,不能匹配其它报价方案时执行'
        },
        {
          CharacterPostCode: 'BHX7',
          RangePrice: [{ Range: '0-20(CBM)', Price: 2050.0 }, { Range: '20以上(CBM)', Price: 2000.0 }],
          FbaServiceType: 1,
          Remarks: '优先级最低,不能匹配其它报价方案时执行'
        },
      ],
      FBAColumns: []
    }
  },
  mounted() {
      // 获取数组第一项
    const row = this.tableData[0].RangePrice
    this.FBAColumns = []

    // 填充表头
    row.map((obj, index) => {
      this.FBAColumns.push({
        key: parseInt(index + 1),
        label: obj.Range,
        prop: obj.Range,
        width: 200
      })
    })
    this.tableData.map(item => {
      item.RangePrice.map(ix => {
        item[ix.Range] = ix.Price
      })
    })
    console.log('row: ', row);
    console.log('this.FBAColumns: ', this.FBAColumns);
    console.log('this.tableData: ', this.tableData);
  }
}
</script>