element table表格表头动态渲染效果demo(整理)

简介: element table表格表头动态渲染效果demo(整理)

效果图:

<template>
  <div class="app-container referBox">
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="num1" label="数据1"> </el-table-column>
      <el-table-column prop="num2" label="数据2"> </el-table-column>
      <el-table-column v-for="(item,index) in stateData" :prop="item.prop" :label="item.label"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        /* tableData中的每一项state都要是一样的 */
        tableData: [{
            num1: '1',
            state: [{
              title: '动态数据3',
              stateNum: 3
            }, {
              title: '动态数据4',
              stateNum: 4
            }],
            num2: '2'
          },
          {
            num1: '2',
            state: [{
              title: '动态数据3',
              stateNum: 3
            }, {
              title: '动态数据4',
              stateNum: 4
            }],
            num2: '2'
          },
          {
            num1: '3',
            state: [{
              title: '动态数据3',
              stateNum: 3
            }, {
              title: '动态数据4',
              stateNum: 4
            }],
            num2: '2'
          },
        ],
        stateData: []
      }
    },
    mounted() {
      // 获取数组第一项
      const row = this.tableData[0].state
      this.stateData = []
      // 填充表头
      row.map((obj, index) => {
        this.stateData.push({
          key: parseInt(index + 1),
          label: obj.title,
          prop: obj.title,
          width: 200
        })
      })
      this.tableData.map(item => {
        item.state.map(ix => {
          item[ix.title] = ix.stateNum
        })
      })
      console.log('row: ', row);
      console.log('this.stateData: ', this.stateData);
      console.log('this.tableData: ', this.tableData);
    }
  }
</script>
相关文章
|
7月前
|
前端开发 微服务
Element-Plus 表格 el-table 如何支持分页多选
Element-Plus 表格 el-table 如何支持分页多选
|
前端开发 JavaScript API
在 Vue3 + Element Plus 中生成动态表格,动态修改表格,多级表头,合并单元格
在 Vue 中,表格组件是使用频率及复杂度排名第一的组件,前端经常需要根据后台返回的数据动态渲染表格,比如动态表格如何生成,因为表格的列并不是固定的,在未知表格具体有哪些列的场景下,前端如何动态渲染表格数据。又或者需要把表格单元格进行合并处理,比如第一列是日期,需要把相同的日期进行合并,这样表格看起来会更加清晰。 本文手把手教你如何在 Vue3 + Element Plus 中创建表格、生成动态表格、创建动态多级表头、表格行合并、列合并等问题。如果你正在搭建后台管理工具,又不想处理前端问题,推荐使用卡拉云 ,卡拉云是新一代低代码开发工具,可一键接入常见数据库及 API ,无需懂前端,仅需拖拽即
3136 0
|
4月前
|
JavaScript 前端开发 Shell
Element-ui Table表格导出功能的实现
Element-ui Table表格导出功能的实现
73 0
|
5月前
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
450 0
|
6月前
|
JavaScript 前端开发
table表格和下拉组件中data为什么必须是一个函数?
table表格和下拉组件中data为什么必须是一个函数?
|
7月前
基于sortablejs实现拖拽element-ui el-table表格行进行排序
基于sortablejs实现拖拽element-ui el-table表格行进行排序
Element-ui 表格 (Table) 组件中动态合并单元格
Element-ui 表格 (Table) 组件中动态合并单元格
999 0
Element-ui 表格 (Table) 组件中动态合并单元格
HTML table 表头和表格的合并
HTML table 表头和表格的合并
131 0