欢迎光临
我的个人博客网站

vue中手写table的升降序

  有些时候,我们总是无可避免的需要自己去手撸一些东西,因为需求总是在不断的变化。例如,最开始的需求,我们只是在首页展示一个数据列表,此时,我们可能直接就自己手写了一个table,后来,突然增加了一个需求,例如:需要在一些指定的列上面增加排序功能。此时,由于我们的样式和界面都已经调整好了,如果再去重新使用第三方的一些vue组件,会觉得没必要浪费时间,于是,很可能,就需要自己动手去增加一个这样的功能。如下图所示:

  vue中手写table的升降序

vue中手写table的升降序

  封装的组件“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;   } }

赞(0) 打赏
未经允许不得转载:张拓的天空 » vue中手写table的升降序
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏