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数据

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

在这里插入图片描述

后台数据结构参照

注意:绑定的两个数组,数据要处理,后台返回的数据结构要对应

Logo

前往低代码交流专区

更多推荐