简介
在使用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>关键部分在
<template slot-scope="scope">
<el-table :data="scope.row.taskList" :stripe="true">
...就是通过这个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>其实本质还是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);
},总结
做毕设期间学到了不少，这种能获得的时候其实就是很幸福的
还有如果有错误的话，非常欢迎指正😁😁😁
