element表格 控制行和列

76 阅读1分钟

element表格 实现以下需求

Snipaste_2022-10-28_08-33-42.png

 // 这是后端返回的数据
  tableData: [
        {
          id: 53,
          businessTypeId: 266,
          functionalArea: "红色",
          cover_area: 70,
          build_area: 80,
          plot_ratio: 90,
          sort: 1,
          x_axis: 76,
          y_axis: 200,
          color: "#D23131",
          createBy: "huxuehao",
          createTime: "2022-10-27T19:45:01",
          updateBy: "huxuehao",
          updateTime: "2022-10-27T19:45:01",
          deleted: false,
        },
        {
          id: 54,
          businessTypeId: 266,
          functionalArea: "紫色",
          cover_area: 10,
          build_area: 20,
          plot_ratio: 30,
          sort: 3,
          x_axis: 250,
          y_axis: 81,
          color: "#CA31D2",
          createBy: "huxuehao",
          createTime: "2022-10-27T19:45:01",
          updateBy: "huxuehao",
          updateTime: "2022-10-27T19:45:01",
          deleted: false,
        }],
          // 这个是 :data接收的数据 也是用来存放筛选后tableData里面的新数据
     tableData2: [
        {
          place: "占地面积()",
          value: [],
        },
        {
          place: "建筑面积()",
          value: [],
        },
        {
          place: "容积率()",
          value: [],
        },
      ],
 
   mounted() {
    this.tableData.forEach((element, index) => { 
      // 筛选每一行对应的数据 
      this.tableData2[0].value.push(element.cover_area); // 对应占地面积
      this.tableData2[1].value.push(element.build_area); // 对应建筑面积
      this.tableData2[2].value.push(element.plot_ratio); // 对应容积率
    });
  },