【Vue入门实战6】【ElementUI组件使用优化】el-form动态增减表单项==＞ el-table自定义列数并动态加载列 ==＞ 处理后端复杂数据结构==＞回显动态列数据

‘自己’这个东西是看不见的，，撞上一些别的什么，反d回来，才会了解自己。

功能效果速览：

输入form表单项（时间区间）==> 生成table对应的列名

本功能主要是实现【新建自定义配置】，输入配置基本信息，可以自由添加、删除 输入多个‘时间区间’。输入完成后点击确定，对应生成表格，如：输入时间区间（0-1，1-2，2-3）表格中的列就是（序号、核素、0-1，1-2，2-3，总释放量）输入时间区间（0-1，1-2，2-3，3-4，4-5，5-6）表格中的列就是（序号、核素、0-1，1-2，2-3，3-4，4-5，5-6，总释放量）

效果说明：

1. el-form-item动态添加行 删除行 *** 作 ==> 实现输入需要多少个的表格列

2. el-table动态加载el-form-item输入的列名称 ==> 输入多少个列名，动态生成多少个列的表格，并可以自由编辑。

3.el-table根据后端返回数据回显动态表格el-table

---

目录

功能效果速览

 一、实现el-form动态增减表单项

1.基础功能form表单

2.el-form动态增减表单项的修改使用

（1）添加addDomain

（2）删除deleteDomain()

（3）确认提交-生成表格列数据

 二、根据列数组动态生成表格

1.完成固定列表格

2.动态生成列dynamicColumns

2.获取填写表格数据

3.按照接口要求拼接前端数据

 三、查看列表数据回显

1. 获取后端返回数据

2.拼接重组前端数据

---

 一、实现el-form动态增减表单项 1.基础功能form表单

为了方便，将表单分成两个写，第一个没有难度，附代码。

2.el-form动态增减表单项的修改使用

Element - The world's most popular Vue UI framework

 我们按照这个逻辑写一下我们的输入，只不过我们是两个Input。其中时间区间这一项需要绑定paramsForm的times

            
            --
            
            Hour
            
            
          

// data中的数据声明
paramsForm: {
        name: "",
        times: [{ start: "", end: "", key: "1" }],
},

  另外，需要补充两个函数：添加（addDomain()）删除（removeDomain(item)）

（1）添加addDomain

思路：向parmsForm数组push一个元素，为了区分，key值设置成了时间，其中start,end为起始时间终止时间

// 添加区间
    addDomain() {
      console.log("添加区间", this.paramsForm.times);
      this.paramsForm.times.push({
        start: "",
        end: "",
        key: Date.now(),
      });
      console.log("after", this.paramsForm.times);
    },

 （2）删除deleteDomain()

// 删除执行函数
    removeDomain(item) {
      var index = this.paramsForm.times.indexOf(item);
      if (index !== -1) {
        this.paramsForm.times.splice(index, 1);
      }
    },

（3）确认提交-生成表格列数据

timeSubmit() {
      console.log(this.paramsForm);
      // 不调接口-暂时保存区间-用于生成table
      this.dynamicColumns = [];
      this.paramsForm.times.forEach((e) => {
        let item = e.start + "-" + e.end + "Hours";
        this.dynamicColumns.push({ prop: item, label: item });
      });
      console.log(this.dynamicColumns, "动态列数据");
      // 页面切换
      this.page = 1;
    },

// dynamicColumns: "",
// page: 0, //页面显示0-显示新增列额面1-表格页面

 页面控制切换到table页面，至此完成页面page=0。可以看到，dynamicColumns动态列为我们为后续准备好的动态列表数组！！！！包含label和prop属性。

 二、根据列数组动态生成表格

参考链接：el-table动态添加列_登楼痕的博客-CSDN博客_eltable动态列

1.完成固定列表格

        
        
          
        
        
          
        
        
          核心--动态部分列
        
        
          
        
      

2.动态生成列dynamicColumns

 动态列生成思路：el-table-colum进行循环遍历dynamicColumns中元素。动态绑定prop属性值。表格头部使用slot="header"绑定lable显示列名称。

对于表格中每一个元素的值，使用scope.row[item.prop]绑定！！！！

2.获取填写表格数据

        取消
        保存

使用finalSave()函数。首先输出tableData数组，也就是我们填写好的表格数据，可以看到无误。

finalSave() {
      console.log("保存前的table数据：", this.tableData);
      // 前端拼接格式保存数据
      let data = {};
      for (let i = 0; i < this.tableData.length; i++) {
        this.$set(data, this.tableData[i].name, this.tableData[i].sum);
        for (let item in this.tableData[i]) {
          if (item != "name" && item != "sum") {
            // 只拼接除了sum和nam的
            let name = this.tableData[i].name + "," + item;
            this.$set(data, name, this.tableData[i][item]);
          }
        }
      }
      console.log(data, "111111111111111111111");
      const params = {
        name: this.paramsForm.name,
        facilityId: this.paramsForm.facilityId,
        collectTime: this.paramsForm.collectTime,
        data: data,
        systemTime: this.parseTime(new Date()),
      };
      console.log("提交参数：", params);
      debugger;
      createReviewOrigin(params).then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          this.$message.success(" *** 作成功");
          this.$parent.changePage();
          this.$parent.getOriginList();
        }
      });
    },

3.按照接口要求拼接前端数据

后端需要的数据结构如下：

data = {
    Ac-2232: "10"
    Ac-2232,0-1Hours: "1"
    Ac-2232,1-2Hours: "2"
    Ac-2232,2-3Hours: "3"
    Ac-2232,3-4Hours: "4"

    Am-237: "26"
    Am-237,0-1Hours: "5"
    Am-237,1-2Hours: "6"
    Am-237,2-3Hours: "7"
    Am-237,3-4Hours: "8"
}

 麻烦来啦！！！！我们得到的this.tableData是这样的：

this.tableData = [
 {
    0-1Hours: "1"
    1-2Hours: "2"
    2-3Hours: "3"
    3-4Hours: "4"
    name: "Ac-2232"
    sum: "10"
  },
  {
    0-1Hours: "5"
    1-2Hours: "6"
    2-3Hours: "7"
    3-4Hours: "8"
    name: "Am-237"
    sum: "26"
  }
]

因此，我们使用data保存我们重组的数据，思路：【双层循环遍历】外层遍历tableData的每一项，内层循环遍历tableData的每一列时间数据，然后做拼接 *** 作。

// 前端拼接格式保存数据
      let data = {};
      for (let i = 0; i < this.tableData.length; i++) {
        this.$set(data, this.tableData[i].name, this.tableData[i].sum);
        for (let item in this.tableData[i]) {
          if (item != "name" && item != "sum") {
            // 只拼接除了sum和nam的
            let name = this.tableData[i].name + "," + item;
            this.$set(data, name, this.tableData[i][item]);
          }
        }
      }
      console.log(data, "111111111111111111111");

最后根据接口需要拼接参数发送提交请求。

添加完成后就会看到页面多出来了一条添加的数据‘测试4’

 三、查看列表数据回显

点击配置名称或者编辑会跳转到查看详情页面。

根据后端的数据==>拼接前端需要的数据==>动态回显列==>回显整个表格。

1. 获取后端返回数据

created() {
    // 回显数据
    this.getReviewOrigin();
    // 获取下拉框数据
    this.getFactorList();
  },
methods:{
    // 获取自定义源项列表
    getReviewOrigin() {
      getReviewOrigin(this.dataId).then((res) => {
        this.paramsForm = res.data;
        // 重组表格数据
        this.reformData(res.data.data);
      });
    },
}

// 获取某一自定义源项详情
// export function getReviewOrigin(id) {
//  return request({
//    url: "/data/reviewOrigin/" + id,
//    method: "get"
//  });
//}

获取到的后端数据格式如下：

 

2.拼接重组前端数据

刚才我们说到从this.tableData重组data数据。现在是逆 *** 作，需要根据data,重组this.tableData数据。

思路：

（1）遍历data,不包含逗号是一个核素，得到核素数组。

// 拼凑表格数据
    reformData(data) {
      // 1.遍历对象属性=>形成核素对象数组
      let hsData = [];
      let hsItems = [];
      for (let item in data) {
        console.log(item, "=====");
        // 如果item不包含，则是一个核素
        if (!item.includes(",")) {
          hsData.push({ name: item });
          hsItems.push(item);
        }
      }
      console.log(hsData, hsData.length, "组装好的核素");
      // 2.分离出时间段
      let timeData = [];
      this.dynamicColumns = [];
      for (let element in data) {
        if (element.includes(hsData[0].name) && element.includes(",")) {
          timeData.push(element.split(",")[1]);
          this.dynamicColumns.push({
            prop: element.split(",")[1],
            label: element.split(",")[1],
          });
        }
      }
      console.log(timeData, this.dynamicColumns, "分离出的时间区间table列");
      // 3.重组table数据
      let finalData = [];
      for (let i = 0; i < hsData.length; i++) {
        var others = {};
        var form = {};
        let sum = "";
        for (let e in data) {
          console.log("data.e", e, data[e]);

          if (e.includes(hsItems[i]) && e.includes(",")) {
            let name = e.split(",")[1];
            // this.$set(others, name, data[e]);
            this.$set(form, name, data[e]);
            // this.$set(this.levelForm, "dataLevels", isDose ? 2 : 3);
          } else if (e.includes(hsItems[i]) && !e.includes(",")) {
            // this.$set(form, sum, data[e]);
            sum = data[e];
          }
        }
        finalData.push({
          name: hsItems[i],
          sum: sum,
          ...form,
          // others: { "'0-2Hours'": 12, "'2-4Hours'": 34 },
          // others: others,
        });
      }
      console.log(finalData, "0000000000000000000000000000");
      this.tableData = finalData;
    },

（2）遍历取逗号分隔后面的时间部分

 （3）重组table数组

项目核心代码下载地址：el-form动态增减表单项==＞el-table自定义列数并动态加载列-Javascript文档类资源-CSDN下载