动态显示多个table的内容

155 阅读1分钟

数据准备

   json数据:
   tableList: [
    {
      title: "数据A",
      tableLabel: [
        { label: "col1", width: 60, prop: "name" },
        { label: "col2", width: 60, prop: "sex" },
        { label: "col3", width: 60, prop: "age" },
        { label: "col4", width: 60, prop: "age" },
      ],
      tableData: [
        { name: "小明", sex: "男", age: 12 },
        { name: "小红", sex: "女", age: 10 },
        { name: "小李", sex: "男", age: 8 },
        { name: "小圆", sex: "aa", age: 112 },
      ],
    },
    {
      title: "数据B",
      tableLabel: [
        { label: "id", width: 60, prop: "id" },
        { label: "序列号", width: 100, prop: "num" },
        { label: "日期", width: 100, prop: "date" },
      ],
      tableData: [
        { id: "1", num: "100", date: "2021-10-01" },
        { id: "2", num: "200", date: "2021-10-02" },
        { id: "3", num: "300", date: "2021-10-03" },
      ],
    },
  ],

table定义

        <el-table
            :data="item.tableData"
            border
            v-for="(item, index) in tableList"
            :key="index"
            style="margin-bottom: 20px"
          >
            <el-table-column :label="item.title" align="center">
              <el-table-column
                v-for="(field, index) in item.tableLabel"
                :key="index"
                :prop="field.prop"
                :label="field.label"
                :height="field.height"
              ></el-table-column>
            </el-table-column>
          </el-table>