经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
vue中手写table的升降序
来源:cnblogs  作者:邹琼俊  时间:2021/2/22 9:04:30  对本文有异议

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

  

  封装的组件“DataTable.vue”,代码如下:

  1. <template>
  2. <table class="table">
  3. <thead>
  4. <tr>
  5. <th>{{title}}</th>
  6. <th v-if="title!='建筑'"
  7. @click="onClickHead('count',0)">项目总数(个)<i v-if="filed=='count'"
  8. :class="getIcon(0)"></i></th>
  9. <th @click="onClickHead('objArea',1)">总面积(㎡)<i v-if="filed=='objArea'"
  10. :class="getIcon(1)"></i></th>
  11. <th @click="onClickHead('objEnergy',2)">今日总用电(kWh)<i v-if="filed=='objEnergy'"
  12. :class="getIcon(2)"></i></th>
  13. <th @click="onClickHead('objAreaEnergy',3)">能耗密度(kWh/㎡)<i v-if="filed=='objAreaEnergy'"
  14. :class="getIcon(3)"></i></th>
  15. <th @click="onClickHead('personEnergy',4)">人均能耗(kWh/人)<i v-if="filed=='personEnergy'"
  16. :class="getIcon(4)"></i></th>
  17. </tr>
  18. </thead>
  19. <tbody>
  20. <tr v-for="(item,index) in filterData"
  21. :key="index"
  22. :class="{'default':title=='建筑'}"
  23. @click="jumpToDistrict(item)">
  24. <td>{{item.objName}}</td>
  25. <td v-if="title!='建筑'">{{item.count}}</td>
  26. <td>{{item.objArea}}</td>
  27. <td>{{item.objEnergy}}</td>
  28. <td>{{item.objAreaEnergy}}</td>
  29. <td>{{item.personEnergy}}</td>
  30. </tr>
  31. </tbody>
  32. </table>
  33. </template>
  34.  
  35. <script>
  36. export default {
  37. props: {
  38. title: {
  39. type: String,
  40. default: '区域'
  41. },
  42. dataList: {
  43. type: Array,
  44. default: () => {
  45. return []
  46. }
  47. }
  48. },
  49. data () {
  50. return {
  51. filed: 'count', //排序字段-当前
  52. arrOrderAsc: [false, true, true, true, true], //默认第一项降序
  53. curCellIndex: 0, //当前排序列索引
  54. filterData: []
  55. }
  56. },
  57. watch: {
  58. dataList: {
  59. handler: function (val) {
  60. if (val && val.length > 0) {
  61. this.getOrderData();
  62. }
  63. },
  64. immediate:true,
  65. deep: true, //深度监听设置为 true
  66. }
  67. },
  68. methods: {
  69. getOrderData () {
  70. let list = this.dataList.map(m => {
  71. return {
  72. objName: m.objName,
  73. count: m.regionsList ? m.regionsList.length : 0,
  74. objArea: m.objArea,
  75. objEnergy: m.objEnergy,
  76. objAreaEnergy: m.objAreaEnergy,
  77. personEnergy: m.personEnergy
  78. }
  79. });
  80. this.filterData = this.arrOrderAsc[this.curCellIndex] ? list.sort(this.compareAsc(this.filed)) : list.sort(this.compareDesc(this.filed));
  81. },
  82. jumpToDistrict (item) {
  83. console.log('item :>> ', item);
  84. if (this.title == '建筑') return;
  85. this.$emit('jumpToDistrict', { id: item.objId, name: item.objName, regionsList: m.regionsList });
  86. },
  87. //升序--这是比较函数
  88. compareAsc (p) {
  89. return function (m, n) {
  90. var a = m[p];
  91. var b = n[p];
  92. return a - b;
  93. }
  94. },
  95. //降序--这是比较函数
  96. compareDesc (p) {
  97. return function (m, n) {
  98. var a = m[p];
  99. var b = n[p];
  100. return b - a;
  101. }
  102. },
  103. //点击排序列
  104. onClickHead (val, index) {
  105. this.filed = val;
  106. this.curCellIndex = index;
  107. this.arrOrderAsc[index] = !this.arrOrderAsc[index];
  108. this.getOrderData();
  109. },
  110. //获取升降序图标
  111. getIcon (index) {
  112. return this.arrOrderAsc[index] ? 'el-icon-caret-top' : 'el-icon-caret-bottom';
  113. }
  114. }
  115. }
  116. </script>
  117.  
  118. <style lang="scss" scoped>
  119. @import "@/assets/css/variables.scss";
  120. table thead,
  121. tbody tr,
  122. tfoot tr {
  123. display: table;
  124. width: 100%;
  125. table-layout: fixed;
  126. text-align: center;
  127. }
  128. .table {
  129. width: 100%;
  130. border-collapse: collapse;
  131. text-align: center;
  132. color: white;
  133. tr {
  134. height: 28px;
  135. line-height: 28px;
  136. }
  137. thead {
  138. background: rgba(97, 160, 236, 0.12);
  139. cursor: pointer;
  140. }
  141. tbody {
  142. display: block;
  143. height: 150px;
  144. overflow-y: auto;
  145. @include scrollbarHomeV;
  146. background: linear-gradient(
  147. 180deg,
  148. rgba(19, 34, 98, 0.6) 0%,
  149. ragb(9, 22, 56, 0.6) 100%
  150. );
  151. tr {
  152. cursor: pointer;
  153. &:hover {
  154. color: #26c8f6;
  155. background: rgba(40, 54, 77, 0.5);
  156. }
  157. &.default {
  158. cursor: default;
  159. }
  160. }
  161. }
  162. caption {
  163. text-align: left;
  164. padding-bottom: 4px;
  165. }
  166. }
  167. </style>
  1. 公共样式代码variables.scss,此处主要是自定义滚动样式
  1. $headHeight:80px;//导航条高度
  2. $mainBgColor:#081338; //主体背景颜色
  3. $scrollbarColorHome:#135786; //首页滚动条样式
  4. $hoverColor: #7abef9; //链接hover颜色
  5. /*-----------------------------首页定义滚动条样式------------------*/
  6. @mixin scrollbarHomeV($w: 10px, $h: 12px) {
  7.  
  8. /*webkit内核*/
  9. &::-webkit-scrollbar {
  10. width: $w;
  11. /*滚动条宽度*/
  12. height: $h;
  13. /*滚动条高度*/
  14. }
  15. &::-webkit-scrollbar-track {
  16. -webkit-box-shadow: inset 0 0 6px rgba(19, 87, 134, 0.1);
  17. border-radius: 6px;
  18. }
  19. &::-webkit-scrollbar-thumb {
  20. border-radius: 6px;
  21. background: $scrollbarColorHome;
  22. -webkit-box-shadow: inset 0 0 6px rgba(19, 87, 134, 0.5);
  23. min-height: 40px;
  24. &:hover {
  25. background: $scrollbarColorHome;
  26. }
  27. }
  28. &::-webkit-scrollbar-thumb:window-inactive {
  29. background: $scrollbarColorHome;
  30. }
  31. }

原文链接:http://www.cnblogs.com/jiekzou/p/14426409.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号