有些时候,我们总是无可避免的需要自己去手撸一些东西,因为需求总是在不断的变化。例如,最开始的需求,我们只是在首页展示一个数据列表,此时,我们可能直接就自己手写了一个table,后来,突然增加了一个需求,例如:需要在一些指定的列上面增加排序功能。此时,由于我们的样式和界面都已经调整好了,如果再去重新使用第三方的一些vue组件,会觉得没必要浪费时间,于是,很可能,就需要自己动手去增加一个这样的功能。如下图所示:
封装的组件“DataTable.vue”,代码如下:
<template>
<table class="table">
<thead>
<tr>
<th>{{title}}</th>
<th v-if="title!='建筑'"
@click="onClickHead('count',0)">项目总数(个)<i v-if="filed=='count'"
:class="getIcon(0)"></i></th>
<th @click="onClickHead('objArea',1)">总面积(㎡)<i v-if="filed=='objArea'"
:class="getIcon(1)"></i></th>
<th @click="onClickHead('objEnergy',2)">今日总用电(kWh)<i v-if="filed=='objEnergy'"
:class="getIcon(2)"></i></th>
<th @click="onClickHead('objAreaEnergy',3)">能耗密度(kWh/㎡)<i v-if="filed=='objAreaEnergy'"
:class="getIcon(3)"></i></th>
<th @click="onClickHead('personEnergy',4)">人均能耗(kWh/人)<i v-if="filed=='personEnergy'"
:class="getIcon(4)"></i></th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in filterData"
:key="index"
:class="{'default':title=='建筑'}"
@click="jumpToDistrict(item)">
<td>{{item.objName}}</td>
<td v-if="title!='建筑'">{{item.count}}</td>
<td>{{item.objArea}}</td>
<td>{{item.objEnergy}}</td>
<td>{{item.objAreaEnergy}}</td>
<td>{{item.personEnergy}}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
props: {
title: {
type: String,
default: '区域'
},
dataList: {
type: Array,
default: () => {
return []
}
}
},
data () {
return {
filed: 'count', //排序字段-当前
arrOrderAsc: [false, true, true, true, true], //默认第一项降序
curCellIndex: 0, //当前排序列索引
filterData: []
}
},
watch: {
dataList: {
handler: function (val) {
if (val && val.length > 0) {
this.getOrderData();
}
},
immediate:true,
deep: true, //深度监听设置为 true
}
},
methods: {
getOrderData () {
let list = this.dataList.map(m => {
return {
objName: m.objName,
count: m.regionsList ? m.regionsList.length : 0,
objArea: m.objArea,
objEnergy: m.objEnergy,
objAreaEnergy: m.objAreaEnergy,
personEnergy: m.personEnergy
}
});
this.filterData = this.arrOrderAsc[this.curCellIndex] ? list.sort(this.compareAsc(this.filed)) : list.sort(this.compareDesc(this.filed));
},
jumpToDistrict (item) {
console.log('item :>> ', item);
if (this.title == '建筑') return;
this.$emit('jumpToDistrict', { id: item.objId, name: item.objName, regionsList: m.regionsList });
},
//升序--这是比较函数
compareAsc (p) {
return function (m, n) {
var a = m[p];
var b = n[p];
return a - b;
}
},
//降序--这是比较函数
compareDesc (p) {
return function (m, n) {
var a = m[p];
var b = n[p];
return b - a;
}
},
//点击排序列
onClickHead (val, index) {
this.filed = val;
this.curCellIndex = index;
this.arrOrderAsc[index] = !this.arrOrderAsc[index];
this.getOrderData();
},
//获取升降序图标
getIcon (index) {
return this.arrOrderAsc[index] ? 'el-icon-caret-top' : 'el-icon-caret-bottom';
}
}
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/variables.scss";
table thead,
tbody tr,
tfoot tr {
display: table;
width: 100%;
table-layout: fixed;
text-align: center;
}
.table {
width: 100%;
border-collapse: collapse;
text-align: center;
color: white;
tr {
height: 28px;
line-height: 28px;
}
thead {
background: rgba(97, 160, 236, 0.12);
cursor: pointer;
}
tbody {
display: block;
height: 150px;
overflow-y: auto;
@include scrollbarHomeV;
background: linear-gradient(
180deg,
rgba(19, 34, 98, 0.6) 0%,
ragb(9, 22, 56, 0.6) 100%
);
tr {
cursor: pointer;
&:hover {
color: #26c8f6;
background: rgba(40, 54, 77, 0.5);
}
&.default {
cursor: default;
}
}
}
caption {
text-align: left;
padding-bottom: 4px;
}
}
</style>
公共样式代码variables.scss,此处主要是自定义滚动样式
$headHeight:80px;//导航条高度
$mainBgColor:#081338; //主体背景颜色
$scrollbarColorHome:#135786; //首页滚动条样式
$hoverColor: #7abef9; //链接hover颜色
/*-----------------------------首页定义滚动条样式------------------*/
@mixin scrollbarHomeV($w: 10px, $h: 12px) {
/*webkit内核*/
&::-webkit-scrollbar {
width: $w;
/*滚动条宽度*/
height: $h;
/*滚动条高度*/
}
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(19, 87, 134, 0.1);
border-radius: 6px;
}
&::-webkit-scrollbar-thumb {
border-radius: 6px;
background: $scrollbarColorHome;
-webkit-box-shadow: inset 0 0 6px rgba(19, 87, 134, 0.5);
min-height: 40px;
&:hover {
background: $scrollbarColorHome;
}
}
&::-webkit-scrollbar-thumb:window-inactive {
background: $scrollbarColorHome;
}
}
完