Vue + Element 怎么画复杂的表格？
开发
5 分钟 读完 (大约 767 个字) 0次访问

Vue + Element 怎么画复杂的表格？

一、需求

1. 如下图所示，横竖两个表头，paihao_jyj、paihao_fsj表头名称和中间那些值为动态数据，a1、a2…和f1、f13以及1、2、3、4…都是固定死的。

2. 行、列相交的单元格是相连的，会给出对应的值，根据对应的值给出对应的颜色。（红：断开 黑：维持原来连着的不变 绿：新连）

3. 解释第2点，在表中，“0”表示空，没有值，不展示任何颜色；260-a1-2和260-f13-4相连，颜色为黑色。

4. 当鼠标悬停在连接点时会出现气泡确认框进行“断开”、“连接”操作。

二、思路

1. 本次使用的是element ui，写多级表头，只需要在 el-table-column 里面嵌套 el-table-column，就可以实现。（先不管合并单元格）

2. element里并没有垂直表头，所以我们作为列插入值也一样能达到效果。

3. 跟后端工程师定好接口返回的数据结构，这一点尤为重要！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
/*这是我们定好的表头接口数据结构*/
fdCode: "LBCX2600"
fdName: "120长嘴滤棒（260）A"
jyjFsgArr: ["1", "2", "3", "4"]
jyjName: "A01"
}

{
/*这是我们定好的表格值（连接点）接口数据结构*/
/*该条数据表示：F02-3跟A05-1相连，连接点状态为1，id为ce91c9f9c42b4864a898671868f010a3*/
connectList: ["A05-1-1-ce91c9f9c42b4864a898671868f010a3"]
fdCode: "LBCX2600"
fdName: "120长嘴滤棒（260）A"
fsjFsg: "F02-3"
fsjFsgNo: "3"
fsjName: "F02"
}

4. 数据处理。

三、实现

1. 模拟数据

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
<el-table
	:key="tableKey"
	v-loading="loading"
	:data="lbpcResultList"
	border
	fit
	highlight-current-row
	class="ahopeTable"
	style="width: 100%;margin-top:5px;"
>
	<el-table-column label="发射机（排号）" width="100" prop="fsjName" align="center"></el-table-column>
	<el-table-column label="编号" width="70" prop="code_fsj" align="center"></el-table-column>
	<el-table-column label="卷烟机牌号" align="center">
		<el-table-column v-for="(item,index) in jyjName" :label="item.name" :key="index" width="70" align="center">
			<el-table-column :label="item.code" align="center">
				<el-table-column
					v-for="(items,index) in item.col"
					:label="items"
					:key="index"
					width="50"
					align="center">
					<template slot-scope="scope">
						<div class="insertContent" :class="{
							holdClass:scope.row[`${item.code}-${items}`] ==='1'	,
							offClass:scope.row[`${item.code}-${items}`] ==='0'	,
							linkClass:scope.row[`${item.code}-${items}`] ==='2'	,
						}">
							{{scope.row[`${item.code}-${items}`]}}
						</div>
					</template>
				</el-table-column>
			</el-table-column>
		</el-table-column>
	</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
export default {
	data(){
		return{
			jyjName:[
            	{
            		name:'260',
            		code:'A01',
            		col: ['1','2','3','4'],
            	},
            	{
            		name:'260',
            		code:'A02',
            		col: ['1','2','3','4'],
            	},
            	{
            		name:'100P',
            		code:'A03',
            		col: ['1','2','3','4'],
            	},
            	{
            		name:'100P',
            		code:'A04',
            		col: ['1','2','3','4'],
            	},
            ],
            lbpcResultList:[
            	{
            		paihao_fsj:'100G',
            		fsj: 'F1',
            		code_fsj: '1',
            		paihao_jyj: '260',
            		connectList: ['A01-1-0','A02-4-2'],
            		// 'A01-1':0,
            		// 'A02-4':2,
            	},
            	{
            		paihao_fsj:'100G',
            		fsj: 'F1',
            		code_fsj: '2',
            		paihao_jyj: '260',
            		connectList: ['A03-4-2'],
            	},
            ],
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
this.lbpcResultList = this.lbpcResultList.map(o=>{
	let obj = {}
	o.connectList.forEach(v=>{
		let arr = v.split('-')
		obj[`${arr[0]}-${arr[1]}`] = arr[2]
		obj[`${arr[0]}-${arr[1]}-id`] = arr[3]
	})
	o.fsjName = o.fsj+'（'+o.paihao_fsj+'）';
	Object.assign(o,obj)		//对象合并
	return o
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.insertContent{
	width: 78%;
	height: 100%;
	margin-left: 4px;
	border-radius: 20px;
}
.holdClass{
	background-color: #161918;
	color: #161918;
}
.offClass{
	background-color: #ea2528;
	color: #ea2528;
}
.linkClass{
	background-color: #41c409;
	color: #41c409;
}


这是根据我们写的模拟数据达到的效果，跟表格已经差不多了。

2. 连接点操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template slot-scope="scope">
	<el-popover trigger="hover" placement="top">
		<p>当前状态为
			<span v-if="scope.row[`${item.jyjName}-${items}`]==='1'">“维持连接”，是否断开？</span>
			<span v-if="scope.row[`${item.jyjName}-${items}`]==='0'">“断开”，是否连接？</span>
			<span v-if="scope.row[`${item.jyjName}-${items}`]==='2'">“新连”，是否断开？</span>
		</p>
		<div style="text-align: center; margin: 0">
			<el-button @click="changeStatus(
								scope.row[`${item.jyjName}-${items}-id`],
								scope.row[`${item.jyjName}-${items}`])"
					   type="primary" size="mini">确定</el-button>
		</div>
		<div slot="reference" :class="{
			insertContent: scope.row[`${item.jyjName}-${items}`],
			holdClass: scope.row[`${item.jyjName}-${items}`] ==='1',
			offClass: scope.row[`${item.jyjName}-${items}`] ==='0',
			linkClass: scope.row[`${item.jyjName}-${items}`] ==='2',
		}">
			{{scope.row[`${item.jyjName}-${items}`]}}
		</div>
	</el-popover>
</template>
1
2
/*改变状态*/
changeStatus(id,status){}

效果

3. 合并单元格、固定列

1
2
3
4
5
6
7
8
9
10
11
12
<!--合并单元格加 :span-method="objectSpanMethod"-->
<el-table
	:key="tableKey"
	v-loading="loading"
	:data="fsjFdList"
	:span-method="objectSpanMethod"
	border
	fit
	highlight-current-row
	class="ahopeTable"
	style="width: 100%;margin-top:5px;"
></el-table>

我们从表格中可以看出，每10行进行一次合并，所以方法我们可以这么写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
	if (columnIndex === 0) {
		if (rowIndex % 10 === 0) {
			return {
				rowspan: 10,
				colspan: 1
			};
		} else {
			return {
				rowspan: 0,
				colspan: 0
			};
		}
	}
}

1
2
3
<!--固定列只需加fixed-->
<el-table-column label="发射机（排号）" width="100" prop="fsjName" fixed align="center"></el-table-column>
<el-table-column label="编号" width="70" prop="code_fsj" fixed align="center"></el-table-column>

3. 联调接口

最终效果：

（本文为博主原创文章，转载请附上博文链接！）

# 日常问题

喜欢这篇文章？打赏一下作者吧

如何调用免费的天气接口获取当地天气状况？
如何在vue项目中使用百度地图，并且计算两点间的里程数？
关注我

链接

分类

标签云

CSS CSS3 HTML5 JavaScript VUE element-ui meta uni-app webpack4 博客搭建 总结 摄影 日常问题 权力的游戏 杭州 麦理浩径

最新文章

归档

标签

CSS 3
CSS3 2
HTML5 1
JavaScript 4
VUE 6
element-ui 1
meta 1
uni-app 1
webpack4 2
博客搭建 1
总结 2
摄影 1
日常问题 5
权力的游戏 2
杭州 1
麦理浩径 1

最新文章

归档

标签

CSS 3
CSS3 2
HTML5 1
JavaScript 4
VUE 6
element-ui 1
meta 1
uni-app 1
webpack4 2
博客搭建 1
总结 2
摄影 1
日常问题 5
权力的游戏 2
杭州 1
麦理浩径 1
Your browser is out-of-date!

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

×