这是我参与更文挑战的第4天，活动详情查看： 更文挑战
前言
上一篇我们介绍了Element-UI使用的三个小技巧(Element-UI 使用合集)，今天我们再来看另外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>
<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>
解析
这里我们模拟的是根据地理位置的不同(上海,北京,广州...)，再根据是否含有某个字段(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: [
{},
{}
]
}
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>
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>
