devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：笔触狂放9 | 2024-02-16 06:24:11

赞

踩

动态增减表单项

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

功能效果速览：

输入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表单

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

  1. <el-form :inline="true" :model="paramsForm">
  2.         <el-row>
  3.           <el-col :span="8">
  4.             <el-form-item label="配置名称：">
  5.               <el-input
  6.                 v-model="paramsForm.name"
  7.                 placeholder="请输入"
  8.                 style="height: 32px"
  9.                 size="mini"
  10.               ></el-input>
  11.             </el-form-item>
  12.           </el-col>
  13.           <el-col :span="8">
  14.             <el-form-item label="设施名称：">
  15.               <el-select
  16.                 v-model="paramsForm.facilityId"
  17.                 placeholder="请选择"
  18.                 size="mini"
  19.               >
  20.                 <el-option label="CEFR堆" :value="1"> </el-option>
  21.                 <el-option label="CARR堆" :value="2"> </el-option>
  22.               </el-select>
  23.             </el-form-item>
  24.           </el-col>
  25.           <el-col :span="8">
  26.             <el-form-item label="采集时间：">
  27.               <el-date-picker
  28.                 value-format="yyyy-MM-dd HH:mm:ss"
  29.                 v-model="paramsForm.collectTime"
  30.                 type="datetime"
  31.                 size="mini"
  32.                 placeholder="选择日期时间"
  33.               >
  34.               </el-date-picker>
  35.             </el-form-item>
  36.           </el-col>
  37.         </el-row>
  38.       </el-form>

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

Element - The world's most popular Vue UI framework

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

  1. <el-form-item
  2.             v-for="(time, index) in paramsForm.times"
  3.             :label="'时间区间' + (index * 1 + 1) + ':'"
  4.             :key="time.key"
  5.             :prop="'time.' + index + 1"
  6.           >
  7.             <el-input
  8.               v-model="time.start"
  9.               placeholder="请输入"
  10.               style="height: 32px; width: 100px"
  11.               size="mini"
  12.               type="number"
  13.               min="0"
  14.             ></el-input>
  15.             <span style="margin: 0px 20px">--</span>
  16.             <el-input
  17.               v-model="time.end"
  18.               placeholder="请输入"
  19.               style="height: 32px; width: 100px"
  20.               size="mini"
  21.               min="0"
  22.               type="number"
  23.             ></el-input>
  24.             <span style="margin: 0px 20px">Hour</span>
  25.             <i
  26.               class="el-icon-circle-close"
  27.               style="color: red"
  28.               @click.prevent="removeDomain(time)"
  29.             ></i>
  30.             <i
  31.               class="el-icon-circle-plus-outline"
  32.               style="margin: 0px 20px"
  33.               v-if="index == paramsForm.times.length - 1"
  34.               @click.prevent="addDomain()"
  35.             ></i>
  36.           </el-form-item>
  1. // data中的数据声明
  2. paramsForm: {
  3.         name: "",
  4.         times: [{ start: "", end: "", key: "1" }],
  5. },

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

（1）添加addDomain

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

  1. // 添加区间
  2.     addDomain() {
  3.       console.log("添加区间", this.paramsForm.times);
  4.       this.paramsForm.times.push({
  5.         start: "",
  6.         end: "",
  7.         key: Date.now(),
  8.       });
  9.       console.log("after", this.paramsForm.times);
  10.     },

 （2）删除deleteDomain()

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

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

  1. timeSubmit() {
  2.       console.log(this.paramsForm);
  3.       // 不调接口-暂时保存区间-用于生成table
  4.       this.dynamicColumns = [];
  5.       this.paramsForm.times.forEach((e) => {
  6.         let item = e.start + "-" + e.end + "Hours";
  7.         this.dynamicColumns.push({ prop: item, label: item });
  8.       });
  9.       console.log(this.dynamicColumns, "动态列数据");
  10.       // 页面切换
  11.       this.page = 1;
  12.     },
  13.  
  14. // dynamicColumns: "",
  15. // page: 0, //页面显示0-显示新增列额面1-表格页面

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

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

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

1.完成固定列表格

  1. <el-table
  2.         :data="tableData"
  3.         width="100%"
  4.         max-height="calc( 100vh - 380px )"
  5.         @selection-change="handleSelectionChange"
  6.       >
  7.         <el-table-column type="selection" width="55" align="center" />
  8.         <el-table-column label="序号" prop="index" width="55" align="center">
  9.           <template slot-scope="scope">
  10.             <span>{{ scope.$index + 1 }}</span>
  11.           </template>
  12.         </el-table-column>
  13.         <el-table-column label="核素" prop="name" align="center">
  14.           <template slot-scope="scope">
  15.             <el-select
  16.               v-model="scope.row.name"
  17.               placeholder="请选择"
  18.               v-if="isEdit"
  19.               size="mini"
  20.               filterable
  21.             >
  22.               <el-option
  23.                 v-for="item in hsSelectOption"
  24.                 :key="item.name"
  25.                 :label="item.name"
  26.                 :value="item.name"
  27.               >
  28.               </el-option>
  29.             </el-select>
  30.             <span v-else>{{ scope.row.name }}</span>
  31.           </template>
  32.         </el-table-column>
  33.         <el-table-column>
  34.           核心--动态部分列
  35.         </el-table-column>
  36.         <el-table-column prop="sum" label="总释放量" align="center">
  37.           <template slot-scope="scope">
  38.             <el-input
  39.               v-if="isEdit"
  40.               v-model="scope.row.sum"
  41.               autocomplete="off"
  42.               size="mini"
  43.             ></el-input>
  44.             <span v-else> {{ scope.row.sum }}</span>
  45.           </template>
  46.         </el-table-column>
  47.       </el-table>

2.动态生成列dynamicColumns

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

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

  1. <el-table-column
  2.           v-for="(item, index) in dynamicColumns"
  3.           :key="index"
  4.           :prop="item.prop"
  5.         >
  6.           <template slot="header">
  7.             {{ item.label }}
  8.           </template>
  9.           <template slot-scope="scope">
  10.             <!-- {{ scope.row.custom[item.prop] }} -->
  11.  
  12.             <el-input
  13.               v-if="isEdit"
  14.               v-model="scope.row[item.prop]"
  15.               autocomplete="off"
  16.               style="width: 100px"
  17.               size="mini"
  18.             ></el-input>
  19.             <span v-else>{{ scope.row[item.prop] }}</span>
  20.           </template>
  21.         </el-table-column>

2.获取填写表格数据

  1. <div class="saveButton">
  2.         <el-button type="primary" plain size="mini">取消</el-button>
  3.         <el-button type="primary" size="mini" @click="finalSave"
  4.           >保存</el-button
  5.         >
  6. </div>

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

  1. finalSave() {
  2.       console.log("保存前的table数据：", this.tableData);
  3.       // 前端拼接格式保存数据
  4.       let data = {};
  5.       for (let i = 0; i < this.tableData.length; i++) {
  6.         this.$set(data, this.tableData[i].name, this.tableData[i].sum);
  7.         for (let item in this.tableData[i]) {
  8.           if (item != "name" && item != "sum") {
  9.             // 只拼接除了sum和nam的
  10.             let name = this.tableData[i].name + "," + item;
  11.             this.$set(data, name, this.tableData[i][item]);
  12.           }
  13.         }
  14.       }
  15.       console.log(data, "111111111111111111111");
  16.       const params = {
  17.         name: this.paramsForm.name,
  18.         facilityId: this.paramsForm.facilityId,
  19.         collectTime: this.paramsForm.collectTime,
  20.         data: data,
  21.         systemTime: this.parseTime(new Date()),
  22.       };
  23.       console.log("提交参数：", params);
  24.       debugger;
  25.       createReviewOrigin(params).then((res) => {
  26.         if (res.code == 200) {
  27.           console.log(res.data);
  28.           this.$message.success("操作成功");
  29.           this.$parent.changePage();
  30.           this.$parent.getOriginList();
  31.         }
  32.       });
  33.     },

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

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

  1. data = {
  2.     Ac-2232: "10"
  3.     Ac-2232,0-1Hours: "1"
  4.     Ac-2232,1-2Hours: "2"
  5.     Ac-2232,2-3Hours: "3"
  6.     Ac-2232,3-4Hours: "4"
  7.  
  8.     Am-237: "26"
  9.     Am-237,0-1Hours: "5"
  10.     Am-237,1-2Hours: "6"
  11.     Am-237,2-3Hours: "7"
  12.     Am-237,3-4Hours: "8"
  13. }

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

  1. this.tableData = [
  2.  {
  3.     0-1Hours: "1"
  4.     1-2Hours: "2"
  5.     2-3Hours: "3"
  6.     3-4Hours: "4"
  7.     name: "Ac-2232"
  8.     sum: "10"
  9.   },
  10.   {
  11.     0-1Hours: "5"
  12.     1-2Hours: "6"
  13.     2-3Hours: "7"
  14.     3-4Hours: "8"
  15.     name: "Am-237"
  16.     sum: "26"
  17.   }
  18. ]

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

  1. // 前端拼接格式保存数据
  2.       let data = {};
  3.       for (let i = 0; i < this.tableData.length; i++) {
  4.         this.$set(data, this.tableData[i].name, this.tableData[i].sum);
  5.         for (let item in this.tableData[i]) {
  6.           if (item != "name" && item != "sum") {
  7.             // 只拼接除了sum和nam的
  8.             let name = this.tableData[i].name + "," + item;
  9.             this.$set(data, name, this.tableData[i][item]);
  10.           }
  11.         }
  12.       }
  13.       console.log(data, "111111111111111111111");

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

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

 三、查看列表数据回显

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

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

1. 获取后端返回数据

  1. created() {
  2.     // 回显数据
  3.     this.getReviewOrigin();
  4.     // 获取下拉框数据
  5.     this.getFactorList();
  6.   },
  7. methods:{
  8.     // 获取自定义源项列表
  9.     getReviewOrigin() {
  10.       getReviewOrigin(this.dataId).then((res) => {
  11.         this.paramsForm = res.data;
  12.         // 重组表格数据
  13.         this.reformData(res.data.data);
  14.       });
  15.     },
  16. }
  17.  
  18. // 获取某一自定义源项详情
  19. // export function getReviewOrigin(id) {
  20. //  return request({
  21. //    url: "/data/reviewOrigin/" + id,
  22. //    method: "get"
  23. //  });
  24. //}

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

 

2.拼接重组前端数据

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

思路：

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

  1. // 拼凑表格数据
  2.     reformData(data) {
  3.       // 1.遍历对象属性=>形成核素对象数组
  4.       let hsData = [];
  5.       let hsItems = [];
  6.       for (let item in data) {
  7.         console.log(item, "=====");
  8.         // 如果item不包含，则是一个核素
  9.         if (!item.includes(",")) {
  10.           hsData.push({ name: item });
  11.           hsItems.push(item);
  12.         }
  13.       }
  14.       console.log(hsData, hsData.length, "组装好的核素");
  15.       // 2.分离出时间段
  16.       let timeData = [];
  17.       this.dynamicColumns = [];
  18.       for (let element in data) {
  19.         if (element.includes(hsData[0].name) && element.includes(",")) {
  20.           timeData.push(element.split(",")[1]);
  21.           this.dynamicColumns.push({
  22.             prop: element.split(",")[1],
  23.             label: element.split(",")[1],
  24.           });
  25.         }
  26.       }
  27.       console.log(timeData, this.dynamicColumns, "分离出的时间区间table列");
  28.       // 3.重组table数据
  29.       let finalData = [];
  30.       for (let i = 0; i < hsData.length; i++) {
  31.         var others = {};
  32.         var form = {};
  33.         let sum = "";
  34.         for (let e in data) {
  35.           console.log("data.e", e, data[e]);
  36.  
  37.           if (e.includes(hsItems[i]) && e.includes(",")) {
  38.             let name = e.split(",")[1];
  39.             // this.$set(others, name, data[e]);
  40.             this.$set(form, name, data[e]);
  41.             // this.$set(this.levelForm, "dataLevels", isDose ? 2 : 3);
  42.           } else if (e.includes(hsItems[i]) && !e.includes(",")) {
  43.             // this.$set(form, sum, data[e]);
  44.             sum = data[e];
  45.           }
  46.         }
  47.         finalData.push({
  48.           name: hsItems[i],
  49.           sum: sum,
  50.           ...form,
  51.           // others: { "'0-2Hours'": 12, "'2-4Hours'": 34 },
  52.           // others: others,
  53.         });
  54.       }
  55.       console.log(finalData, "0000000000000000000000000000");
  56.       this.tableData = finalData;
  57.     },

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

 （3）重组table数组

  1. <el-table :data="tableData" max-height="450" width="100%">
  2.         <el-table-column type="selection" width="55" align="center" />
  3.         <el-table-column label="序号" prop="index" width="55" align="center">
  4.           <template slot-scope="scope">
  5.             <span>{{ scope.$index + 1 }}</span>
  6.           </template>
  7.         </el-table-column>
  8.         <el-table-column label="核素" prop="name" align="center">
  9.           <template slot-scope="scope">
  10.             <el-select
  11.               v-model="scope.row.name"
  12.               placeholder="请选择"
  13.               v-if="isEdit"
  14.               size="mini"
  15.               filterable
  16.             >
  17.               <el-option
  18.                 v-for="item in hsSelectOption"
  19.                 :key="item.name"
  20.                 :label="item.name"
  21.                 :value="item.name"
  22.               >
  23.               </el-option>
  24.             </el-select>
  25.             <span v-else>{{ scope.row.name }}</span>
  26.           </template>
  27.         </el-table-column>
  28.         <el-table-column
  29.           v-for="(item, index) in dynamicColumns"
  30.           :key="index"
  31.           :prop="item.prop"
  32.         >
  33.           <template slot="header">
  34.             {{ item.label }}
  35.           </template>
  36.           <template slot-scope="scope">
  37.             <!-- {{ scope.row.custom[item.prop] }} -->
  38.  
  39.             <el-input
  40.               v-if="isEdit"
  41.               v-model="scope.row[item.prop]"
  42.               autocomplete="off"
  43.               style="width: 100px"
  44.               size="mini"
  45.             ></el-input>
  46.             <span v-else>{{ scope.row[item.prop] }}</span>
  47.           </template>
  48.         </el-table-column>
  49.         <el-table-column prop="sum" label="总释放量" align="center">
  50.           <template slot-scope="scope">
  51.             <el-input
  52.               v-if="isEdit"
  53.               v-model="scope.row.sum"
  54.               autocomplete="off"
  55.               size="mini"
  56.               style="width: 100px"
  57.             ></el-input>
  58.             <span v-else> {{ scope.row.sum }}</span>
  59.           </template>
  60.         </el-table-column>
  61.       </el-table>

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/91459
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号