参考《Vue,js》实战（梁灏编著）

sort-table：实战：使用Render函数开发可排序的表格组件

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>可排序的表格组件</title><link rel="stylesheet" type="text/css" href="style.css">
</head><body><div id="app" v-cloak><v-table :columns="columns" :data="data"></v-table><button @click="handleAddData">添加数据</button></div><script src="https://unpkg.com/vue/dist/vue.min.js"></script><script src="table.js"></script><script src="index.js"></script>
</body></html>

index.js

var app = new Vue({el:'#app',data:{columns:[{title:'姓名',key: 'name'},{title:'年龄',key:'age',sortable:true},{title:'出生日期',key:'birthday',sortable:true},{title:'地址',key:'address'}],data:[{name:'王小明',age: 18,birthday:'1999-02-21',address:'北京市朝阳区芍药居'},{name:'张小刚',age: 25,birthday:'1992-01-23',address:'北京市海淀区西二旗'},{name:'李小红',age: 30,birthday:'1987-11-10',address:'上海市浦东新区世纪大道'},{name:'周小伟',age: 26,birthday:'1991-10-10',address:'深圳市南山区深南大道'}]},methods:{handleAddData: function () {  this.data.push({name:'刘小天',age: 19,birthday: '1998-05-30',address:'北京市东城区东直门'})}}
});

table.js

Vue.component('v-table', {props: {columns: {type: Array,default: function () {return [];}},data: {type: Array,default: function () {return [];}}},data: function () {return {currentColumns: [],currentData: []}},render: function (h) {var _this = this;var ths = [];this.currentColumns.forEach(function (col, index) {if (col.sortable) {ths.push(h('th', [h('span', col.title),//升序h('a', {class: {on: col._sortType === 'asc'},on: {click: function () {_this.handleSortByAsc(index);}}}, '↑'),//降序h('a', {class: {on: col._sortType === 'desc'},on: {click: function () {_this.handleSortByDesc(index);}}}, '↓'),]));} else {ths.push(h('th', col.title));}});var trs = [];this.currentData.forEach(function (row) {var tds = [];_this.currentColumns.forEach(function (cell) {tds.push(h('td', row[cell.key]));});trs.push(h('tr', tds));});return h('table', [h('thead', [h('tr', ths)]),h('tbody', trs)])},methods: {makeColumns: function () {this.currentColumns = this.columns.map(function (col, index) {col._sortType = "normal";col._index = index;return col;});},makeData: function () {this.currentData = this.data.map(function (row, index) {row._index = index;return row;})},handleSortByAsc: function (index) {var key = this.currentColumns[index].key;this.currentColumns.forEach(function (col) {col._sortType = 'normal';});this.currentColumns[index]._sortType = 'asc';this.currentData.sort(function (a, b) {return a[key] > b[key] ? 1 : -1;});},handleSortByDesc: function (index) {var key = this.currentColumns[index].key;this.currentColumns.forEach(function (col) {col._sortType = 'normal';});this.currentColumns[index]._sortType = 'desc';this.currentData.sort(function (a, b) {return a[key] < b[key] ? 1 : -1;})}},watch: {data: function () {this.makeData();var sortedColumn = this.currentColumns.filter(function (col) {return col._sortType !== 'normal';});if (sortedColumn.length > 0) {if (sortedColumn[0]._sortType === 'asc') {this.handleSortByAsc(sortedColumn[0]._index);} else {this.handleSortByDesc(sortedColumn[0]._index);}}}},mounted() {this.makeColumns();this.makeData();}
});

style.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{background: #f7f7f7;color: #5c6b77;font-weight: 600;white-space: nowrap;
}
table td, table th{padding: 8px 16px;border: 1px solid #e9e9e9;text-align: left;
}
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学习笔记—sort-table：实战：使用Render函数开发可排序的表格组件相关推荐

Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目生成的 ...
Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
Vue.js 学习笔记十一自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...
Vue.js 学习笔记十自定义按键事件
<div id="divApp"><input type="text" v-on:keyup=& ...
Vue.js 学习笔记九 v-if和v-show
<p v-if="flag">v-if</p><p v-show="flag">v-show</p> flag是 ...
Vue.js 学习笔记八 v-for
v-for指令,是用来循环的,常用的情况有以下4种 <div id="divApp"><p v-for="n in 5 ...
Vue.js 学习笔记七控制样式
Vue.js可以灵活的控制样式我们首先随便写2个样式 <style>.divCss {background-color: green;width:400px;height:400px;} ...
Vue.js 学习笔记六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
Vue.js 学习笔记五常用的事件修饰符
介绍几个常用的事件修饰符直接上代码 <div id="divApp"><div class="divColor" v-on:click=&q ...

Vue.js学习笔记—sort-table：实战：使用Render函数开发可排序的表格组件

sort-table：实战：使用Render函数开发可排序的表格组件

Vue.js学习笔记—sort-table：实战：使用Render函数开发可排序的表格组件相关推荐

最新文章

热门文章