说说如何基于 Vue.js 实现表格组件

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

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

html：

    
    新增

• 把父组件中定义的 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 = [];// 标签数组
        var 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 = [];// 标签数组
        this.currentData.forEach(function (row) {//遍历行
            var tds = [];// 标签数组
            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 = [];// 标签数组
	var 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 = [];// 标签数组
	this.currentData.forEach(function (row) {//遍历行
		var tds = [];// 标签数组
		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)
	])
}

• 创建内容时，我们首先遍历所有行，然后在循环内部遍历所有列，得出 与 内容。
• 创建表头时，对是否排序做了相应的处理，并绑定了相应的点击事件。
• 点击事件定义在 methods 中，因为升序与降序逻辑大体相同，所以又封装了一层 order() 排序函数。
• order() 排序函数内部使用了数组的 sort() 方法。sort() 方法会调用每个数组项的 toString() 方法，然后比较得到的字符串，即使数组中的每一项是数值，比较的也是字符串。这里传入了一个比较函数作为参数。为了兼容所有浏览器，在比较函数中，我们返回的是 1 或者 -1。
• 排序之前，先把所有列的排序类型都设置为不排序，然后再更新当前列的排序状态。这就会对应到 render 函数里绑定 标签的 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;
}

效果：

---

本文示例代码