Vue.js实现可排序的表格组件功能示例


Posted in Javascript onFebruary 19, 2019

本文实例讲述了Vue.js实现可排序的表格组件功能。分享给大家供大家参考,具体如下:

我们基于 Vue.js 实现一个可根据某列进行排序的表格组件。

一个表格包含表头和数据两部分内容。因此,我们定义两个数组,columns 表示表头信息,在 <thread> 中渲染,并可在此指定某一列是否需要排序;data 表示数据。

html:

<div id="app" v-cloak>
  <v-table :data="data" :columns="columns"></v-table>
  <button @click="add">新增</button>
</div>

把父组件中定义的 data 与 columns 传入 v-table 组件。

js:

Vue.component('vTable', {
  props: {
    //表头列名称
    columns: {
      type: Array,
      default: function () {
        return [];
      }
    },
    //数据
    data: {
      type: Array,
      default: function () {
        return [];
      }
    }
  },
  //为了不影响原始数据,这里定义了相应的需要操作的数据对象
  data: function () {
    return {
      currentColumns: [],
      currentData: []
    }
  },
  //render 实现方式
  render: function (createElement) {
    var that = this;
    /**
     * 创建列样式与表头
     */
    var ths = [];//<th> 标签数组
    var cols = [];//<cols> 标签数组
    this.currentColumns.forEach(function (col, index) {
      if (col.width) {//创建列样式
        cols.push(createElement('col', {
          style: {
            width: col.width
          }
        }))
      }
      if (col.sortable) {
        ths.push(createElement('th', [
          createElement('span', col.title),
          //升序
          createElement('a', {
            class: {
              on: col.sortType === 'asc'
            },
            on: {
              click: function () {
                that.sortByAsc(index)
              }
            }
          }, '↑'),
          //降序
          createElement('a', {
            class: {
              on: col.sortType === 'desc'
            },
            on: {
              click: function () {
                that.sortByDesc(index);
              }
            }
          }, '↓')
        ]));
      } else {
        ths.push(createElement('th', col.title));
      }
    });
    /**
     * 创建内容
     */
    var trs = [];//<tr> 标签数组
    this.currentData.forEach(function (row) {//遍历行
      var tds = [];//<td> 标签数组
      that.currentColumns.forEach(function (cell) {//遍历单元格
        tds.push(createElement('td', row[cell.key]));
      });
      trs.push(createElement('tr', tds));
    });
    return createElement('table', [
      createElement('colgroup', cols),
      createElement('thead', [
        createElement('tr', ths)
      ]),
      createElement('tbody', trs)
    ])
  },
  methods: {
    //初始化表头
    initColumns: function () {
      this.currentColumns = this.columns.map(function (col, index) {
        //新建字段,标识当前列排序类型;默认为“不排序”
        col.sortType = 'normal';
        //新建字段,标识当前列在数组中的索引
        col.index = index;
        return col;
      });
    },
    //初始化数据
    initData: function () {
      this.currentData = this.data.map(function (row, index) {
        //新建字段,标识当前行在数组中的索引
        row.index = index;
        return row;
      });
    },
    //排序
    order: function (index, type) {
      this.currentColumns.forEach(function (col) {
        col.sortType = 'normal';
      });
      //设置排序类型
      this.currentColumns[index].sortType = type;
      //设置排序函数
      var sortFunction;
      var key = this.currentColumns[index].key;
      switch (type) {
        default://默认为 asc 排序
        case 'asc':
          sortFunction = function (a, b) {
            return a[key] > b[key] ? 1 : -1;
          };
          break;
        case 'desc':
          sortFunction = function (a, b) {
            return a[key] < b[key] ? 1 : -1;
          };
          break;
      }
      this.currentData.sort(sortFunction);
    },
    //升序
    sortByAsc: function (index) {
      this.order(index, 'asc');
    },
    //降序
    sortByDesc: function (index) {
      this.order(index, 'desc');
    }
  },
  watch: {
    data: function () {
      this.initData();
      //找出排序字段
      var sortedColumn = this.currentColumns.filter(function (col) {
        return col.sortType !== 'normal';
      });
      if (sortedColumn.length > 0) {
        if (sortedColumn[0].sortType === 'asc') {
          this.sortByAsc(sortedColumn[0].index);
        } else {
          this.sortByDesc(sortedColumn[0].index);
        }
      }
    }
  },
  mounted() {
    this.initColumns();
    this.initData();
  }
});
var app = new Vue({
  el: '#app',
  data: {
    //title 、key 与 width 必填;sortable 选填
    columns: [
      {
        title: '名称',
        key: 'name',
        width:'60%'
      },
      {
        title: '数量',
        key: 'num',
        width:'20%',
        sortable: true
      },
      {
        title: '单价',
        key: 'unitPrice',
        width:'20%',
        sortable: true
      }
    ],
    data: [
      {
        name: '真果粒牛奶饮品',
        num: 2,
        unitPrice: 59.9
      },
      {
        name: '苏泊尔(SUPOR)电压力锅 ',
        num: 1,
        unitPrice: 378.0
      },
      {
        name: '乐事(Lay\'s)薯片',
        num: 3,
        unitPrice: 63.0
      }
    ]
  },
  methods:{
    add:function () {
      this.data.push( {
        name: '良品铺子 休闲零食大礼包',
        num: 5,
        unitPrice: 59.80
      });
    }
  }
});

为了让排序后的 columns 与 data 不影响原始数据,我们在组件的 data 中定义了相应的当前数据对象。因此在 method 中使用传入的值,初始化这些数据对象,最后在 mounted() 调用这些初始化方法。

columns 中的每一项都是包含 title(列名)、key(对应 data 中的字段名)、width(宽度) 以及 sortable(是否可排序) 的对象。其中,只有 sortable 为可选项,如果设定为 true,则表示该列可点击排序。

map() 会对数组的每一项运行给定函数,返回每次函数调用的结果组成的数组。

排序分为升序与降序,因为只能对某一列进行排序,所以是互斥操作。我们为每一列新增一个 sortType ,用于标识该列的排序类型,初始值为 normal,表示不排序。

因为排序字段可能是任意列,所以我们为每一列新增一个 index,用于标识当前列在数组中的索引。

在 Render 函数中,首先创建列样式与表头,接着创建内容。

Render 函数中的 createElement 可以简写为 h,这样代码会变得更简洁:

render: function (h) {
  var that = this;
  /**
   * 创建列样式与表头
   */
  var ths = [];//<th> 标签数组
  var cols = [];//<cols> 标签数组
  this.currentColumns.forEach(function (col, index) {
    if (col.width) {//创建列样式
      cols.push(h('col', {
        style: {
          width: col.width
        }
      }))
    }
    if (col.sortable) {
      ths.push(h('th', [
        h('span', col.title),
        //升序
        h('a', {
          class: {
            on: col.sortType === 'asc'
          },
          on: {
            click: function () {
              that.sortByAsc(index)
            }
          }
        }, '↑'),
        //降序
        h('a', {
          class: {
            on: col.sortType === 'desc'
          },
          on: {
            click: function () {
              that.sortByDesc(index);
            }
          }
        }, '↓')
      ]));
    } else {
      ths.push(h('th', col.title));
    }
  });
  /**
   * 创建内容
   */
  var trs = [];//<tr> 标签数组
  this.currentData.forEach(function (row) {//遍历行
    var tds = [];//<td> 标签数组
    that.currentColumns.forEach(function (cell) {//遍历单元格
      tds.push(h('td', row[cell.key]));
    });
    trs.push(h('tr', tds));
  });
  return h('table', [
    h('colgroup', cols),
    h('thead', [
      h('tr', ths)
    ]),
    h('tbody', trs)
  ])
}

创建内容时,我们首先遍历所有行,然后在循环内部遍历所有列,得出 <td> 与 <tr> 内容。

创建表头时,对是否排序做了相应的处理,并绑定了相应的点击事件。

点击事件定义在 methods 中,因为升序与降序逻辑大体相同,所以又封装了一层 order() 排序函数。

order() 排序函数内部使用了数组的 sort() 方法。sort() 方法会调用每个数组项的 toString() 方法,然后比较得到的字符串,即使数组中的每一项是数值,比较的也是字符串。这里传入了一个比较函数作为参数。为了兼容所有浏览器,在比较函数中,我们返回的是 1 或者 -1。

排序之前,先把所有列的排序类型都设置为不排序,然后再更新当前列的排序状态。这就会对应到 render 函数里绑定 <a> 标签的 class 中的 on 样式,即当前列排序状态会被高亮显示。

表格被初始化渲染之后,如果 data 发生变化,那么表格组件数据应该也要同步更新。因此,我们在 watch 中做了数据更新以及数据重排操作。

css:

[v-cloak] {
  display: none;
}
table {
  width: 100%;
  margin-bottom: 24px;
  /*合并边框模型*/
  border-collapse: collapse;
  border-spacing: 0;
  /*在空单元格周围绘制边框*/
  empty-cells: show;
  border: 1px solid #e9e9e9;
}
table th {
  font: bold 14px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  background: #CAE8EA;
  color: #5c6b77;
  /*设置文本粗细*/
  font-weight: 600;
  /*段落中的文本不进行换行*/
  white-space: nowrap;
  border-top: 1px solid #C1DAD7;
}
table td, table th {
  padding: 8px 16px;
  text-align: left;
  border-right: 1px solid #C1DAD7;
  border-bottom: 1px solid #C1DAD7;
}
table th a {
  /*不独占一行的块级元素*/
  display: inline-block;
  margin: 0 4px;
  cursor: pointer;
}
table th a.on {
  color: #3399ff;
}
table th a:hover {
  color: #3399ff;
}

效果:

Vue.js实现可排序的表格组件功能示例

点击此处查看本文示例代码

PS:感兴趣的朋友还可以使用如下在线工具测试上述代码:

在线HTML/CSS/JavaScript前端代码调试运行工具:
http://tools.3water.com/code/WebCodeRun

在线HTML/CSS/JavaScript代码运行工具:
http://tools.3water.com/code/HtmlJsRun

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
jquery解析xml字符串简单示例
Apr 11 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
js中数组的常用方法小结
Dec 30 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 #Javascript
小程序转发探索示例
Feb 19 #Javascript
JS异步执行结果获取的3种解决方式
Feb 19 #Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 #jQuery
基于node.js实现爬虫的讲解
Feb 18 #Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 #Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 #Javascript
You might like
php中转义mysql语句的实现代码
2011/06/24 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
js实现文字截断功能
2016/09/14 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
解析vue中的$mount
2017/12/21 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
劳动模范事迹材料
2014/01/19 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
班风学风建设方案
2014/05/06 职场文书
党员剖析材料范文
2014/12/18 职场文书
销售内勤岗位职责
2015/02/10 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
结婚幸福感言
2015/08/01 职场文书
自信主题班会
2015/08/14 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
python_tkinter弹出对话框创建
2022/03/20 Python
python+opencv实现目标跟踪过程
2022/06/21 Python