- A+
所属分类：Web前端
有些时候，我们总是无可避免的需要自己去手撸一些东西，因为需求总是在不断的变化。例如，最开始的需求，我们只是在首页展示一个数据列表，此时，我们可能直接就自己手写了一个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;
var b = n;
return a - b; } }, //降序--这是比较函数 compareDesc (p) { return function (m, n) { var a = m;
var b = n;
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; } }
完
