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));
}
资源评论
weixin_38729108
- 粉丝: 5
- 资源: 896
最新资源
- Matlab_Matlab界面Graphviz图形布局包允许交互式编辑生成的图形.zip
- Matlab_Matlab例程处理空间数据，特别是与MMS和ClusterCAA数据.zip
- Matlab_Matlab粒子滤波和平滑示例代码.zip
- H.265/HEVC解码器优化：针对Intel平台的技术探讨与性能提升
- Matlab_Matlab软件处理动作捕捉文件.zip
- Matlab_Matlab三维数字图像相关工具箱.zip
- Matlab_Matlab实现的Adam随机梯度下降优化算法.zip
- Matlab_Matlab实现siftopensift算法.zip
- Matlab_Matlab实现的非刚性迭代最近点.zip
- Matlab_Matlab散射网络.zip
- Matlab_Matlab实现的多视图低秩稀疏子空间聚类.zip
- Matlab_Matlab实现的高斯过程等机器学习工具.zip
- Matlab_Matlab实现的粒子群优化，有很好的实例说明.zip
- Matlab_Matlab图形用户界面计算和可视化旋转stewart平台的逆运动学.zip
- Matlab_Matlab实现的一种三维重建算法.zip
- Matlab_Matlab小提琴绘图.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
