Vue + Element 画复杂表格(2)?

Vue + Element 画复杂表格(2)?

上一篇博主讲解了如何用 Vue + Element 画出复杂的表格,今天再讲一个类似的,但是难度没有之前那个表格大,主要整理一下思路。

一、需求

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=>{
//3-A02-4-1-5487851
//3:A02-4
//3-status:1
//3-id:5487851
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;
})
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×