(iView)表格JSON字符串转为键值对，去掉对象的双引号和花括号，省略号隐藏，悬浮显示完整内容

(iView)表格JSON字符串转为键值对，去掉对象的双引号和花括号，省略号隐藏，悬浮显示完整内容

原数据


最终效果：

代码：

//data中相关变量
colums:[
	...
  {
    title: "属性",
    key: "descNew",
    align: "center",
    ellipsis: true, //省略隐藏
    tooltip: true, //提示
  },
  ...
],
tableData: [],
descNew: [],//字符串转化后的数组
tempObj: {},//去掉双引号和花括号的新对象

//调取接口获取表格数据后
this.tableData.forEach((ele) => {
   if (ele.desc != "null") {
     this.descNew = JSON.parse(ele.desc);//转为数组
     const result = {};//存放键值对的对象
     this.descNew.forEach((item) => {
       result[item.key] = item.value;
       //去掉对象的双引号和花括号
       var test = JSON.stringify(result); //对象转换为JSON字符串
       var test2 = test.slice(1, test.length - 1);
       var test3 = [];
       for (var i = 0; i < test2.length; i++) {
         test3.push(test2[i].replace('"', ""));
       }
       for (var j = 0; j < test3.length; j++) {
         if (test3[j] === "") {
           test3.splice(j, 1);
         }
       }
       this.tempObj = test3.join("");
     });
     //给对象添加属性
     this.$set(ele, "descNew", this.tempObj);
   }
 });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

情况二 内容显示复杂

 {
   title: "所属概念",
   align: "center", 
   ellipsis: true, //省略隐藏
   render: (h, params) => {
     // 鼠标移入显示详情
     return h("div", [
       h(
         "span",
         {
           style: {
             display: "inline-block",
             width: "100%",
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",
           },
           domProps: {
           //内容显示复杂情况
             title: params.row.conceptNames
               ? params.row.conceptNames
               : params.row.srcConcept
               ? params.row.srcConcept
               : "/",
           },
         },
         params.row.conceptNames
           ? params.row.conceptNames
           : params.row.srcConcept
           ? params.row.srcConcept
           : "/"
       ),
     ]);
   },
 },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

解决参考：

• 转为键值对：https://blog.csdn.net/summer_girlcc/article/details/116138909

• 去除双引号花括号：https://blog.csdn.net/LONGYog/article/details/124467552

• 悬浮提示：https://www.bbsmax.com/A/gGdXjePmJ4/