动态列表的数据渲染、新增、编辑等功能开辟及数据处理
说一个比力繁琐的功能吧，我使用的是 vue + element UI + vxe-table 来实现的这个动态列表，着实呢 vxe-table 这个表格插件里边有动态表格 vxe-grid 只必要通过表头数组里边的 field: 'name', 与表体数组里的 name: 'Test1', 对应上就行了，很简单吧；可是题目来了，后端给我的是一串超长的id，表体里也是给了一个超长的id让举行匹配（如：图1），然后导致匹配出现题目，搜了一下说纯数字不太行，会出题目，毕竟也确实云云，无论怎么匹配，页面只表现有多少行数据，但每一列的值都是空的，没有任何表现，于是就自己举行了数据的处理。https://i-blog.csdnimg.cn/direct/38533220e1324a96b5c7bdf76e3def67.png
图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) {
tableList = {
// 基础信息
id: rowIndex, // 添加行ID
sortNo: cell.sortNo, // 添加编号
};
}
// 添加动态字段
this.$set(tableList, fieldName, cell.fieValue);
// 保留原始数据（可选）
this.$set(tableList, `${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'); 处理后的效果数据：
https://i-blog.csdnimg.cn/direct/b1221929063642e4b887ffab7e99b05b.png
以上就对列表回显处理完成！
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;
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 = []; // 新增：收集用户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) {
tableList = {
id: rowIndex,
sortNo: cell.sortNo,
};
}
// 动态字段赋值
this.$set(tableList, fieldName, cell.fieValue);
this.$set(tableList, `${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' } }
);
//
页:
[1]