动态列表的数据渲染、新增、编辑等功能开辟及数据处理 ...

说一个比力繁琐的功能吧，我使用的是 vue + element UI + vxe-table 来实现的这个动态列表，着实呢 vxe-table 这个表格插件里边有动态表格 vxe-grid 只必要通过表头数组里边的 field: 'name', 与表体数组里的 name: 'Test1',  对应上就行了，很简单吧；可是题目来了，后端给我的是一串超长的id，表体里也是给了一个超长的id让举行匹配（如：图1），然后导致匹配出现题目，搜了一下说纯数字不太行，会出题目，毕竟也确实云云，无论怎么匹配，页面只表现有多少行数据，但每一列的值都是空的，没有任何表现，于是就自己举行了数据的处理。

图1

注：根据上图会看到表体数组 rowsList 里边又是一个数组，里边这个数组里又包罗了多个对象（这多个对象就是每一列对应的值了，必要用 fieId 去匹配） 
html模版部门：

1. <vxe-grid border resizable ref="xGrid" :columns="tableColumn" :data="tableData">
2.     <template v-slot:operation="{ row }">
3.         <el-button size="mini" @click="editBtn(row)" type="text">编辑</el-button>
4.         <el-button size="mini" @click="delBtn(row)" type="text" style="color: #f56c6c;">删除</el-button>
5.     </template>
6. </vxe-grid>

复制代码

1、对接口获取到的数据举行匹配处理，然后回显到列表上，如下：
表头数据（模拟）：

1. let columnList = [
2.     {
3.         "fieId": "1909122684954550274",
4.         "title": "JST TPM",
5.         "fieldType": 4
6.     },
7.     {
8.         "fieId": "1909122684954550275",
9.         "title": "备注",
10.         "fieldType": 0
11.     },
12.     {
13.         "fieId": "1909122684962938882",
14.         "title": "客户提出人姓名",
15.         "fieldType": 0
16.     },
17.     {
18.         "fieId": "1909122684962938883",
19.         "title": "提出时间",
20.         "fieldType": 3
21.     },
22.     {
23.         "fieId": "1909122684962938884",
24.         "title": "客户需求明细",
25.         "fieldType": 1
26.     },
27.     {
28.         "fieId": "1909122684962938885",
29.         "title": "功能模块名称",
30.         "fieldType": 0
31.     }
32. ]

复制代码

表体数据（模拟）：

1. let rowsList = [
2.     [
3.         {
4.             "sortNo": "0",
5.             "fieId": "1909122684954550274",
6.             "fieValue": "111"
7.         },
8.         {
9.             "sortNo": "0",
10.             "fieId": "1909122684954550275",
11.             "fieValue": "2132"
12.         },
13.         {
14.             "sortNo": "0",
15.             "fieId": "1909122684962938882",
16.             "fieValue": "4124"
17.         },
18.         {
19.             "sortNo": "0",
20.             "fieId": "1909122684962938883",
21.             "fieValue": "2025-04-16 00:00:00"
22.         },
23.         {
24.             "sortNo": "0",
25.             "fieId": "1909122684962938884",
26.             "fieValue": "1"
27.         },
28.         {
29.             "sortNo": "0",
30.             "fieId": "1909122684962938885",
31.             "fieValue": "发送方"
32.         }
33.     ],
34.     [
35.         {
36.             "sortNo": "1",
37.             "fieId": "1909122684954550274",
38.             "fieValue": "139850429"
39.         },
40.         {
41.             "sortNo": "1",
42.             "fieId": "1909122684954550275",
43.             "fieValue": "12312"
44.         },
45.         {
46.             "sortNo": "1",
47.             "fieId": "1909122684962938882",
48.             "fieValue": "312312"
49.         },
50.         {
51.             "sortNo": "1",
52.             "fieId": "1909122684962938883",
53.             "fieValue": "2025-04-22 00:00:00"
54.         },
55.         {
56.             "sortNo": "1",
57.             "fieId": "1909122684962938884",
58.             "fieValue": "1"
59.         },
60.         {
61.             "sortNo": "1",
62.             "fieId": "1909122684962938885",
63.             "fieValue": "213124"
64.         }
65.     ]
66. ]

复制代码

处理方法：

1.                 columnList.forEach((item, index) => {
2.                         // 为每列添加唯一field标识
3.                         const fieldName = `title${index}`;
4.                         this.$set(item, 'field', fieldName);
5.                         this.tableColumn.push(item);
6.                         
7.                         // 处理行数据
8.                         rowsList.forEach((row, rowIndex) => {
9.                             row.forEach((cell) => {
10.                                 if (item.fieId === cell.fieId) {
11.                                     // 初始化行对象（如果尚未存在）
12.                                     if (!tableList[rowIndex]) {
13.                                         tableList[rowIndex] = {
14.                                             // 基础信息
15.                                             id: rowIndex, // 添加行ID
16.                                             sortNo: cell.sortNo, // 添加编号
17.                                         };
18.                                     }
19.                                     // 添加动态字段
20.                                     this.$set(tableList[rowIndex], fieldName, cell.fieValue);
21.                                     // 保留原始数据（可选）
22.                                     this.$set(tableList[rowIndex], `${fieldName}_meta`, {
23.                                         fieId: item.fieId,
24.                                         title: item.title,
25.                                         fieldType: item.fieldType,
26.                                         content: cell.fieValue,
27.                                     });
28.                                 }
29.                             });
30.                         });
31.                     });
32.                     this.tableData = tableList;
33.                     this.tableColumn.push(
34.                         { type: 'seq', fixed: "left", width: 50 },
35.                         { title: '操作', width: 100, showOverflow: true, fixed: "right", slots: { default: 'operation' } }
36.                     )
37.                 console.log(this.tableColumn,'this.tableColumn');
38.                 console.log(this.tableData,'this.tableData');

复制代码

处理后的效果数据：

以上就对列表回显处理完成！
2、接下来是新增时候的处理

1.         addBtn(){
2.             this.dialogVisible = true;
3.             this.titleText = '新增';
4.             this.tableColumn.map((item) => {
5.                 item.manageId = this.queryData.id,
6.                 this.$set(item, 'content', '');
7.             })
8.         },

复制代码

新增直接在 this.tableColumn 里边新增一个content 字段 然后在提交的时候直接把 this.tableColumn 这个数组全部提交给后端即可！
3、编辑处理

1.         editBtn(row){
2.             this.dialogVisible = true;
3.             this.titleText = '编辑';
4.             this.tableColumn.forEach(item => {
5.                 if (!item.fieId) return; // 跳过没有 fieId 的，比如操作列等
6.                 // 在 obj1 中查找所有带有 _meta 的键
7.                 for (const key in row) {
8.                     if (key.endsWith('_meta')) {
9.                         const meta = row[key];
10.                         if (meta && meta.fieId === item.fieId) {
11.                             this.$set(item, 'content', meta.content);
12.                             break;
13.                         }
14.                     }
15.                 }
16.             });
17.         },

复制代码

注：由于在列表的时候修改了数据格式，所以在编辑的时候还要对数据举行处理，然后才能使用
编辑的处理方法说明：

• row 中的 title0_meta, title1_meta 是动态的，不能直接写死去访问。
  
• 所以用 for...in 遍历 row 全部键，找到以 _meta 末端的。
  
• 然后对比 meta.fieId 与 item.fieId，如果匹配，就把 content 写入到 item.content。
  

附加：如果列表中有人员、组织、类型等字段必要通过id去匹配表现中文的，方法如下（我的是通过人员id匹配人员姓名展示）：
修改 getList 方法
[code]getList() {
    this.loading = true;
    this.tableColumn = [];
    this.tableData = [];
    let tableList = [];
    let userIdList = []; // 新增：收集用户ID
    let userFieldMap = []; // 保存在哪些字段上用到用户信息

    let params = {
        manageId: this.queryData.id,
        current: this.tablePage.current,
        size: this.tablePage.size,
    };

    api.queryParticularsDataAttach(params).then((res) => {
        if (res.data.data == null) {
            this.tableColumn = [];
            this.tableData = [];
        } else {
            let columnList = res.data.data.columns;
            let rowsList = res.data.data.rowsList;
            this.tablePage.totalElements = res.data.data.total;

            columnList.forEach((item, index) => {
                const fieldName = `title${index}`;
                this.$set(item, 'field', fieldName);
                this.tableColumn.push(item);

                rowsList.forEach((row, rowIndex) => {
                    row.forEach((cell) => {
                        if (item.fieId === cell.fieId) {
                            if (!tableList[rowIndex]) {
                                tableList[rowIndex] = {
                                    id: rowIndex,
                                    sortNo: cell.sortNo,
                                };
                            }

                            // 动态字段赋值
                            this.$set(tableList[rowIndex], fieldName, cell.fieValue);
                            this.$set(tableList[rowIndex], `${fieldName}_meta`, {
                                fieId: item.fieId,
                                title: item.title,
                                fieldType: item.fieldType,
                                content: cell.fieValue,
                            });

                            // 如果是人员类型字段（fieldType === 4），收集 userId
                            if (item.fieldType === 4 && cell.fieValue) {
                                userIdList.push(cell.fieValue);
                                userFieldMap.push({
                                    rowIndex,
                                    fieldName,
                                    userId: cell.fieValue,
                                });
                            }
                        }
                    });
                });
            });

            this.tableData = tableList;

            // 插入序号列和操作列
            this.tableColumn.push(
                { type: 'seq', fixed: "left", width: 50 },
                { title: '操作', width: 100, showOverflow: true, fixed: "right", slots: { default: 'operation' } }
            );

            //