Vue.js实现可排序的表格组件功能示例实现可排序的表格组件功能示例
本文实例讲述了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));
}
资源评论
