動態列表的數據渲染、新增、編輯等功能開發及數據處理

說一個比較繁瑣的功能吧，我使用的是 vue + element UI + vxe-table 來實現的這個動態列表，其實呢 vxe-table 這個表格插件里邊有動態表格?vxe-grid 只需要通過表頭數組里邊的?field: 'name', 與表體數組里的?name: 'Test1',? 對應上就行了，很簡單吧；可是問題來了，后端給我的是一串超長的id，表體里也是給了一個超長的id讓進行匹配（如：圖1），然后導致匹配出現問題，搜了一下說純數字不太行，會出問題，事實也確實如此，無論怎么匹配，頁面只顯示有多少行數據，但每一列的值都是空的，沒有任何顯示，于是就自己進行了數據的處理。

圖1

注：根據上圖會看到表體數組?rowsList?里邊又是一個數組，里邊這個數組里又包含了多個對象（這多個對象就是每一列對應的值了，需要用 fieId 去匹配）?

html模版部分：

<vxe-grid border resizable ref="xGrid" :columns="tableColumn" :data="tableData"><template v-slot:operation="{ row }"><el-button size="mini" @click="editBtn(row)" type="text">編輯</el-button><el-button size="mini" @click="delBtn(row)" type="text" style="color: #f56c6c;">刪除</el-button></template>
</vxe-grid>

1、對接口獲取到的數據進行匹配處理，然后回顯到列表上，如下：

表頭數據（模擬）：

let columnList = [{"fieId": "1909122684954550274","title": "JST TPM","fieldType": 4},{"fieId": "1909122684954550275","title": "備注","fieldType": 0},{"fieId": "1909122684962938882","title": "客戶提出人姓名","fieldType": 0},{"fieId": "1909122684962938883","title": "提出時間","fieldType": 3},{"fieId": "1909122684962938884","title": "客戶需求明細","fieldType": 1},{"fieId": "1909122684962938885","title": "功能模塊名稱","fieldType": 0}
]

表體數據（模擬）：

let rowsList = [[{"sortNo": "0","fieId": "1909122684954550274","fieValue": "111"},{"sortNo": "0","fieId": "1909122684954550275","fieValue": "2132"},{"sortNo": "0","fieId": "1909122684962938882","fieValue": "4124"},{"sortNo": "0","fieId": "1909122684962938883","fieValue": "2025-04-16 00:00:00"},{"sortNo": "0","fieId": "1909122684962938884","fieValue": "1"},{"sortNo": "0","fieId": "1909122684962938885","fieValue": "發送方"}],[{"sortNo": "1","fieId": "1909122684954550274","fieValue": "139850429"},{"sortNo": "1","fieId": "1909122684954550275","fieValue": "12312"},{"sortNo": "1","fieId": "1909122684962938882","fieValue": "312312"},{"sortNo": "1","fieId": "1909122684962938883","fieValue": "2025-04-22 00:00:00"},{"sortNo": "1","fieId": "1909122684962938884","fieValue": "1"},{"sortNo": "1","fieId": "1909122684962938885","fieValue": "213124"}]
]

處理方法：

                columnList.forEach((item, index) => {// 為每列添加唯一field標識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, // 添加行IDsortNo: 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,});}});});});this.tableData = tableList;this.tableColumn.push({ type: 'seq', fixed: "left", width: 50 },{ title: '操作', width: 100, showOverflow: true, fixed: "right", slots: { default: 'operation' } })console.log(this.tableColumn,'this.tableColumn');console.log(this.tableData,'this.tableData');

處理后的結果數據：

以上就對列表回顯處理完成！

2、接下來是新增時候的處理

        addBtn(){this.dialogVisible = true;this.titleText = '新增';this.tableColumn.map((item) => {item.manageId = this.queryData.id,this.$set(item, 'content', '');})},

新增直接在?this.tableColumn 里邊新增一個content 字段然后在提交的時候直接把?this.tableColumn 這個數組全部提交給后端即可！

3、編輯處理

        editBtn(row){this.dialogVisible = true;this.titleText = '編輯';this.tableColumn.forEach(item => {if (!item.fieId) return; // 跳過沒有 fieId 的，比如操作列等// 在 obj1 中查找所有帶有 _meta 的鍵for (const key in row) {if (key.endsWith('_meta')) {const meta = row[key];if (meta && meta.fieId === item.fieId) {this.$set(item, 'content', meta.content);break;}}}});},

注：因為在列表的時候修改了數據格式，所以在編輯的時候還要對數據進行處理，然后才能使用

編輯的處理方法說明：

row 中的 title0_meta, title1_meta 是動態的，不能直接寫死去訪問。
所以用 for...in 遍歷 row?所有鍵，找到以 _meta 結尾的。
然后對比 meta.fieId 與 item.fieId，如果匹配，就把 content 寫入到 item.content。

附加：如果列表中有人員、組織、類型等字段需要通過id去匹配顯示中文的，方法如下（我的是通過人員id匹配人員姓名展示）：

修改 getList 方法

getList() {this.loading = true;this.tableColumn = [];this.tableData = [];let tableList = [];let userIdList = []; // 新增：收集用戶IDlet 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），收集 userIdif (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' } });// 👇 去查人員名稱if (userIdList.length > 0) {this.getUsersList(userIdList).then((userMap) => {// 替換tableData中的字段內容為用戶姓名userFieldMap.forEach(({ rowIndex, fieldName, userId }) => {const user = userMap[userId];if (user) {// 替換顯示值this.$set(this.tableData[rowIndex], fieldName, user.realName + '（' + user.account + '）');// 同步 meta 中的 content 也更新為姓名if (this.tableData[rowIndex][`${fieldName}_meta`]) {this.tableData[rowIndex][`${fieldName}_meta`].content = user.realName + '（' + user.account + '）';}}});});}}this.loading = false;}).catch(() => {this.loading = false;});
},// 👇 獲取人員數據的方法：返回 userId -> user 信息的映射
getUsersList(idList) {return api.getPeoples(idList).then((res) => {const userList = res.data.data || [];const userMap = {};userList.forEach(user => {userMap[user.id] = user;});return userMap;});
}

以上僅是個人實現的使用方法，可根據自己的需求進行修改或者優化

至此完成！！！

測試有效！！！感謝支持！！！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/900706.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/900706.shtml
英文地址，請注明出處：http://en.pswp.cn/news/900706.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！