vue el-table动态表格表头+对应数据

北半球的狗

已于 2022-08-23 16:50:47 修改

阅读量3.8k

点赞数 3

文章标签： elementui

于 2022-06-13 16:30:20 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_48305373/article/details/125262667

版权

本文介绍了如何使用 Vue.js 的 Element UI 库动态渲染表格，包括动态生成表头和匹配对应的数据。示例代码展示了如何使用 `v-for` 指令遍历 `tableOption` 数组来创建表头，并将 `tableData` 作为表格数据源进行绑定。同时强调了后台返回的数据结构需与前端绑定的数组对应，确保数据正确展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue el-table动态表格创建

效果图

动态渲染表头；动态匹配表头对应数据

在这里插入代码片
 <el-table
            :data="tableData"
            style="width: 100%"
            border
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="60"
              align="center"
            ></el-table-column>
            <el-table-column type="index" width="60" label="编号">
            </el-table-column>
            <el-table-column
              v-for="(item, index) in tableOption"
              :key="index"
              :label="item.label"
              :prop="item.prop"
            >
            </el-table-column>
          </el-table>```

  表格数据
      **tableData: [],表格渲染绑定数据
     // 表格表头数组
      tableOption: [],

在这里插入图片描述
tableData数据