Element-Table处理属性列表问题

简介

在使用ruoyi中，遇到一个问题，没有一个较为完美的解决方案，最终只能妥协一下完成，这里记录一下。

问题

后端返回了这样的数据，如下图

这就是我说的属性列表，就是说返回的每一行数据都是包含一个是列表的属性。

如上，就是rows总数据中的一行中的taskList，我希望数据能像下面这样展示出来。

找遍了Element实在是找不到一个满意的方案。

https://element.eleme.cn/#/zh-CN/component/table#he-bing-xing-huo-lie

Element确实有一个很像的解决方案，就是上面的，Table合并行或列的方式

但是，细看了一下，它实现的是将多行返回数据经过函数处理过后，满足条件的行或列进行合并，和我要的不是一回事

我想要的是属性的展示，不是数据的整理。

解决

网上也找了很多方案，也没有满意的，但确实能提供一些不同的思路。

最终考虑两种方案

方案一：表格嵌套，就是既然是一个属性列表那么在那一个表格展示就好

方案二：弹出展示，就是需要查看时点击一个按钮，弹出展示列表数据

两个方案各有好处，但我最终采用的是方案一，原因有下

• rows数据中的workload属性强相关于这个属性列表，直接展示更能看出其中关系
• 第二点与第一点有点相似，都是关于展示的“直观”，我修改变化时希望能直接看到父属性变化

基于上面就有了一种方案了

下面看具体实现，需要对ruoyi分离版的前端有点了解，还有代码并不完整，只说一下关键部分

<el-table
          border
          v-loading="loading"
          :data="workloadList"
          @selection-change="handleSelectionChange"
          >
    <el-table-column type="selection" width="55" align="center" />
    ...
    <el-table-column label="类型" align="center" prop="type">

    <el-table-column label="任务" align="center" width="1500">
        <template slot-scope="scope">
            <el-table :data="scope.row.taskList" :stripe="true">
                <el-table-column label="编号" align="center" prop="id" />
                <el-table-column label="人数" align="center" prop="headcount" />
                <el-table-column
                                 label="人数系数"
                                 align="center"
                                 prop="headcountCoefficient"
                                 ><template slot-scope="scope"
                                            >{{ parseFloat(scope.row.headcountCoefficient).toFixed(3) }}
                    template>el-table-column
                    >
                <el-table-column
                                 label="难度系数"
                                 align="center"
                                 prop="degreeCoefficient"
                                 ><template slot-scope="scope">
                    <el-input
                              v-model="scope.row.degreeCoefficient"
                              placeholder="请输入难度系数"
                              /> template
                    >el-table-column>
                <el-table-column label="单工作量" align="center" prop="workload">
                    <template slot-scope="scope">
                        {{ getTaskWorkload(scope.row) }}template
                        >
                el-table-column>
                <el-table-column
                                 label="操作"
                                 align="center"
                                 class-name="small-padding fixed-width"
                                 >
                    <template slot-scope="scope">
                        <el-button
                                   size="mini"
                                   type="text"
                                   icon="el-icon-check"
                                   @click="handleTaskUpdate(scope.row)"
                                   v-hasPermi="['teacher:task:edit']"
                                   >更新el-button
                            >
                    template>
                el-table-column>
            el-table>
        template>
    el-table-column>
    <el-table-column label="工作量" align="center" prop="workload">
        <template slot-scope="scope"> {{ getWorkload(scope.row) }} template>
    el-table-column>
    <el-table-column
                     label="操作"
                     align="center"
                     class-name="small-padding fixed-width"
                     >
        <template slot-scope="scope">
            <el-button
                       v-show="scope.row.type > 0"
                       size="mini"
                       type="text"
                       icon="el-icon-edit"
                       @click="handleUpdate(scope.row)"
                       v-hasPermi="['teacher:workload:edit']"
                       >修改el-button
                >
            <el-button
                       size="mini"
                       type="text"
                       icon="el-icon-delete"
                       @click="handleDelete(scope.row)"
                       v-hasPermi="['teacher:workload:remove']"
                       >删除el-button
                >
        template>
    el-table-column>
el-table>
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

关键部分在

<template slot-scope="scope">
            <el-table :data="scope.row.taskList" :stripe="true">
                ...
1
2
3

就是通过这个Element.Table中这个scope来确定范围，再通过scope.row取得需要的数据即可

可以看一下下面的效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jRVJVPAh-1661327067373)(https://cdn.staticaly.com/gh/wnhyang/clouding@master/cloud-picture/image.3ploqxdepee0.webp)]

其实还是有点不满意的地方的，就是每个属性列都要展示一份独立的Table表头

我目前也没找到好的方法把他提取出来，🤔🤔🤔

至此关于主要的分享已经结束了

补充

可能有人会注意到我上面的属性列表的输入框，那其实我做的一个类似于Excel公式计算的东西

下面也分享一下，其实也很简单，可能我这还是笨方法呢😂😂😂

<el-table-column label="单工作量" align="center" prop="workload">
    <template slot-scope="scope">
        {{ getTaskWorkload(scope.row) }}template
        >
el-table-column>
1
2
3
4
5

其实本质还是scope定义好范围，计算就是了

把需要的方法写在methods里即可，唯一我觉得需要注意的地方是，如果函数调用参数是另一个函数计算的，那么可能需要在最后的函数中再调用一次，如下

/** 计算总工作量 */
getWorkload(row) {
    var y = parseFloat(0);
    for (var i in row.taskList) {
        y += parseFloat(this.getTaskWorkload(row.taskList[i]));
    }
    return y.toFixed(3);
},
1
2
3
4
5
6
7
8

总结

做毕设期间学到了不少，这种能获得的时候其实就是很幸福的

还有如果有错误的话，非常欢迎指正😁😁😁