有些时候,我们总是无可避免的需要自己去手撸一些东西,因为需求总是在不断的变化。例如,最开始的需求,我们只是在首页展示一个数据列表,此时,我们可能直接就自己手写了一个table,后来,突然增加了一个需求,例如:需要在一些指定的列上面增加排序功能。此时,由于我们的样式和界面都已经调整好了,如果再去重新使用第三方的一些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>
- $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;
- }
- }