element 中的table表头动态渲染

最新推荐文章于 2024-08-07 00:15:46 发布

呀呀音

最新推荐文章于 2024-08-07 00:15:46 发布

阅读量5.1k

点赞数 2

分类专栏： element-ui 文章标签： vue vue.js html 前端

本文链接：https://blog.csdn.net/heixiuheixiu666/article/details/104705024

版权

element-ui 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

element 中的table表头动态渲染

实际开发过程中遇到需求，表格中表头不一定是固定的，表头需要动态渲染。

<el-table :data="this.tableData"
              height="525">
      <el-table-column v-for="(item, index) in tableLabel"
                       :key="index"
                       :prop="item.prop"
                       :width="item.width"
                       :label="item.label">
      </el-table-column>
    </el-table>

这里的height="525"是为了固定头部

tableData: [// 表数据
        { id: 1, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 2, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 3, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 4, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 5, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 6, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 7, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 8, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 9, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 10, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 11, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 12, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 13, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 14, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 15, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
      ],
      tableLabel: [ // 表头数据
        { label: 'id', width: '60', prop: 'id' },
        { label: '日期', width: '', prop: 'date' },
        { label: '销售量', width: '', prop: 'sales' },
        { label: '销售额', width: '', prop: 'sale' },
        { label: '成本', width: '', prop: 'const' },
        { label: '利润', width: '', prop: 'profit' }
      ]

感谢这篇文章vue element 中的table动态渲染（动态表头）超棒的~