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

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

北半球的狗

3758人浏览 · 2022-06-13 16:30:20

北半球的狗 · 2022-06-13 16:30:20 发布

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

在这里插入图片描述

后台数据结构参照

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^