上一篇博主讲解了如何用 Vue + Element 画出复杂的表格，今天再讲一个类似的，但是难度没有之前那个表格大，主要整理一下思路。
源码：https://github.com/surperJin/vue-element-table
一、需求
1. 如下图所示，横竖两个表头，发射机是动态获取的，而发射管是固定的，每台机器都是10条管子。
2. 每台机器都可能有多个连接点，直接展示对应连接点的编号。
3. 黑色字体为维持连接的状态，绿色为新加连接的状态，断开状态不展示内容。
二、思路
1. 实现过程中，最重要的是要 将对象里某个属性的值拆分开，重组装为键。
2. 第一条数据：
🅰F01的3号管跟A02的4号管相连，连接状态为1，id为061546545；
🅱F01的5号管跟B01的1号管相连，连接状态为2，id为156546545；
第二条数据：没有连接点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| fsjFdList: [
{
fdCode: 'LBPX3000',
fdName: '普通300',
fsjFsg: ['3-A02-4-1-061546545','5-B01-1-2-156546545'],
fsjName: 'F01',
},
{
fdCode: 'LBPX3000',
fdName: '高透100',
fsjFsg: [],
fsjName: 'F02'
}
]
|
三、实现
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
| <div class="ahopeTableCont">
<el-table
:key="tableKey"
v-loading="loading"
:data="fsjFdList"
border
fit
highlight-current-row
class="ahopeTable"
style="width: 100%;margin-top:5px;"
>
<el-table-column label="发射机（牌号）" prop="fsjNAME" fixed align="center"></el-table-column>
<el-table-column label="发射机发射管号" align="center">
<el-table-column v-for="(item,index) in fsgList" :key="index" :label="item" width="120" align="center">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>当前状态为
<span v-if="scope.row[`${item}-status`]==='1'">“维持连接”，是否断开？</span>
<span v-if="scope.row[`${item}-status`]==='2'">“新连”，是否断开？</span>
</p>
<div style="text-align: center; margin: 0">
<el-button @click="changeStatus(
scope.row[`${item}-id`],
scope.row[`${item}-status`])"
type="primary" size="mini">确定</el-button>
</div>
<div slot="reference" :class="{useStyle: scope.row[`${item}-status`] == '2',holdStyle: scope.row[`${item}-status`] == '1'}" style="font-weight: 600;">
{{scope.row[item]}}
</div>
</el-popover>
</template>
</el-table-column>
</el-table-column>
</el-table>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| this.fsjFdList.map(o=>{
let obj = {};
o.fsjFsg.forEach(v=>{
let arr = v.split('-')
obj[`${arr[0]}`] = `${arr[1]}-${arr[2]}`
obj[`${arr[0]}-status`] = arr[3]
obj[`${arr[0]}-id`] = arr[4]
})
Object.assign(o,obj)
o.fdCode ? o.fsjNAME = o.fsjName + "（" + o.fdName + "）" : o.fsjNAME = o.fsjName;
})
|
