Element使用合集2
# 前言
上一篇我们介绍了Element-UI使用的三个小技巧(Element-UI 使用合集 (opens new window))，今天我们再来看另外2个。一起掌握更多知识叭！
# 1、Vue Element-ui 表格单独设置行背景色
效果图如下:
需求假设我们从后端返回的数据，根据某个字段对每一行的数据添加背景颜色，便于用户区分筛选，这里我们用到el-table的row-style属性，参数如下；
说明
行的style回调方法(Function({row, rowIndex})/Object),这里我们直接用row就够了，我们打印看一下，row就是当前行的数据
代码
<template>
<el-table
:data="tableData"
style="width: 100%"
border
:row-style="tableRowStyle"
>
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<script>
export default {
data() {
return {
tableData: [
{
date: "2011-05-02",
name: "张三",
address: "上海",
location: "sh",
pinkHandle: 0,
},
{
date: "2012-05-04",
name: "李四",
address: "北京",
location: "bj",
colorHandle: 1,
},
{
date: "2013-05-01",
name: "王五",
address: "广州",
location: "gz",
changeTime: 1,
},
{
date: "2014-05-03",
name: "孙七",
address: "厦门",
location: "xm",
hasCol: 1,
},
{
date: "2013-05-01",
name: "老王",
address: "广州",
location: "gz",
changeTime: 1,
},
{
date: "2015-05-03",
name: "钱八",
address: "西安",
location: "xa",
hasCol: 0,
},
],
};
},
methods: {
tableRowStyle({ row }) {
//
console.log(row);
let style = {}; // 存放css属性的对象
switch (row.location) {
case "sh":
if (row.pinkHandle === 0) {
style = {
"background-color": "pink",
"color": "blue",
"font-weight": "bold",
};
}
return style;
case "bj":
if (row.colorHandle === 1) {
style = {
"background-color": "#FFFFCC",
"color": "blue",
};
}
return style;
case "gz":
if (row.changeTime === 1) {
style = {
"background-color": "blue",
"color": "yellow",
"font-weight": "bold",
};
}
return style;
case "xm":
if (row.hasCol === 1) {
style = {
"background-color": "red",
"color": "yellow",
"font-weight": "bold",
};
}
return style;
case "xa":
if (row.hasCol === 0) {
style = {
"background-color": "skyblue",
"color": "#FFFFFF",
"font-weight": "bold",
};
}
return style;
}
},
},
};
</script>
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
解析
这里我们模拟的是根据地理位置的不同(上海,北京,广州...)，再根据是否含有某个字段(pinkHandle,changeTime,...)进行设置不同的背景颜色等css属性。实际情况中数据格式也许跟这模拟的数据不一样，但是我们只需要更改不同的判断条件即可。
# 2、Vue Element-ui 表格控制列的显示与隐藏
老样子上效果图:
说明
- 主要效果就是控制表格列的
显示隐藏, 通过v-if实现，点击控制列窗口的勾选框控制isTrue的true和false到达显示隐藏的效果 - 前4列为
固定列
这次我们做了一点点改变, 对表格表头数据进行了一个
封装，封装成一个大对象。然后进行一个循环渲染即可。为啥这样子做呢？
首先一旦数据多了，且又分多种情况的话(比如
多平台切换，都是公用一个table,你不可能一个平台写一个table;而且数据肯定又是不一样，自然每个平台列的数量就不一样。如果像之前全部写在页面上，当某个平台不需要这一列的时候常用都是v-if控制，多起来的时候整个页面就看起来杂乱无章，维护起来比较困难。但我们现在只需要更改封装的数据即可，完全不用动页面的代码。 封装数据
可能有个疑问就是为什么要这么多数据勒？为的就是展示固定列的效果呀！一个页面放完了横向滚动条就没有，就看不到效果了。
// ../common/js/data.js
// 单数据
export const Data = [{
field: "date", // 对应后端返回数据的字段
title: "统计年月", // 表头
algin: "center", // 内容居中
key: Math.random(), // 保持唯一性
isTrue: true, // 控制列的显示隐藏
fixed: true, // 是否为固定列
tooltip: true, // 悬浮提示
},
{
field: "name",
title: "店铺名称",
algin: "center",
key: Math.random(),
isTrue: true,
fixed: true,
color: true,
},
{
field: "address",
title: "负责人",
algin: "center",
key: Math.random(),
isTrue: true,
fixed: true,
},
{
field: "sumMonth",
title: "月",
algin: "center",
key: Math.random(),
isTrue: true,
fixed: true
},
{
field: "orderTotal",
title: "店铺成交",
algin: "center",
key: Math.random(),
isTrue: true,
},
{
field: "maintainOrderTotal",
title: "成交总额",
algin: "center",
key: Math.random(),
isTrue: true,
},
{
field: "refundTotal",
title: "退款额",
algin: "center",
key: Math.random(),
isTrue: true,
},
{
field: "refundRatio",
title: "退款",
algin: "center",
key: Math.random(),
isTrue: true,
},
{
field: "purchaseCost",
title: "货物",
algin: "center",
key: Math.random(),
isTrue: true,
},
{
field: "shipping",
title: "运费",
algin: "center",
key: Math.random(),
isTrue: true,
},
{
field: "packageFee",
title: "包装",
algin: "center",
key: Math.random(),
isTrue: true,
},
{
field: "commissionFee",
title: "佣金$",
algin: "center",
key: Math.random(),
isTrue: true,
},
{
field: "adCost",
title: "广告花费",
algin: "center",
key: Math.random(),
isTrue: true,
}, // 'Allegro','Lazada','Mercado' * -1
{
field: "rebateCommission",
title: "返还税费",
algin: "center",
key: Math.random(),
isTrue: true,
},
{
field: "shopProfit",
title: "总利润",
algin: "center",
key: Math.random(),
isTrue: true,
},
{
field: "profitRatio",
title: "利润率",
algin: "center",
key: Math.random(),
isTrue: true,
},
{
field: "actualProfit",
title: "实际总利润$",
algin: "center",
key: Math.random(),
isTrue: true,
},
{
field: "shopProfitR",
title: "对比上月利润",
algin: "center",
key: Math.random(),
isTrue: true,
},
{
field: "lastShopProfitRatio",
title: "对比上月增长",
algin: "center",
key: Math.random(),
isTrue: true,
},
]
// 多平台封装数据格式
export const ColData = {
平台1: [
{},
{}
],
平台2: [
{},
{}
],
平台3: [
{},
{}
]
}
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
template
<template>
<div>
<el-table
:data="tableData"
style="width: 100%"
border
:row-style="tableRowStyle"
ref="tableRef"
>
<template v-for="item in Data">
<el-table-column
:label="item.title"
min-width="120"
:key="item.key"
:align="item.algin"
:fixed="item.fixed"
v-if="item.isTrue"
>
<template slot="header">
<!-- 悬浮表头提示 -->
<el-tooltip :content="item.title" placement="top" effect="light">
<span>{{ item.title }}</span>
</el-tooltip>
</template>
<template slot-scope="scope">
<!-- style也可以根据数据里的某个字段进行设置哦 -->
<span
:class="item.color ? 'font-class-red' : ''"
:style="{ color: scope.row[item.field] < 0 ? 'red' : '' }"
>{{ scope.row[item.field] }}</span
>
</template>
</el-table-column>
</template>
</el-table>
<!-- 选择列弹出层 -->
<el-popover placement="right" width="400" trigger="click">
<el-checkbox-group v-model="colOptions">
<el-row :gutter="20">
<el-col :span="8" v-for="(item, index) in colSelect" :key="index"
><el-checkbox :label="item" :key="item"></el-checkbox
></el-col>
</el-row>
</el-checkbox-group>
<el-button slot="reference" size="medium" type="success"
>自定义选择列</el-button>
</el-popover>
</div>
</template>
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
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
script
<script>
// 引入table的封装数据
import { Data } from "../common/js/data";
export default {
data() {
return {
Data, // 存储封装数据
colOptions: [], // 多选框默认全选，为啥是数组呢，因为我们用的是el-checkbox-group,v-model绑定就为一个数组
colSelect: [], // 也是所有表头标题, 用于跟多选框组绑定
};
},
created() {
// console.log(Data);
// )
this.colSelect = [];
this.colOptions = [];
if (!Data) {
return;
}
// 给控制列的勾选框赋值数据，因为这个的数据跟表头是一致的，控制这里就等于控制了表格列
for (let i = 0; i < Data.length; i++) {
this.colSelect.push(Data[i].title);
// if(this.colData[i].title == '名称') { // 初始化不想展示的列可以放在这个条件里
// continue;
// }
/*
多平台
if(this.colDatap[plat][i].title == '名称') { // 初始化不想展示的列可以放在这个条件里
continue;
}
*/
this.colOptions.push(Data[i].title);
}
},
watch: {
colOptions(valArr) {
// 未选中，默认勾选框是全选也就是默认全展示，即默认arr就是一个空数组 []
let arr = this.colSelect.filter((i) => valArr.indexOf(i) < 0);
Data.filter((i) => {
if (arr.indexOf(i.title) != -1) {
i.isTrue = false; // 隐藏
} else {
i.isTrue = true; // 显示
}
});
this.$nextTick(() => {
this.$refs.tableRef.doLayout();
});
},
},
beforeUpdate() {
// 重新布局表格
this.$nextTick(() => {
this.$refs.tableRef.doLayout();
});
},
};
</script>
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
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
在线编辑 (opens new window)
上次更新: 2021/11/14, 07:48:46