Vue2 排序表格组件 —— render渲染

作者: yancolin | 来源:发表于2018-04-28 16:35 被阅读118次

效果图

需求：
渲染一个表格，表格的某几项可以升序，降序排序。点击添加数据，可以添加一条数据。

分析完，这里我们需要两个数据数组，一组是表头，另一组是表身。表格部分用表格组件完成，还需要一个点击按钮。分配给表格的数据为表头数组和表身数组。
同样，我们用四个文件来完成此需求： index.html,index.js,table.js,style.css。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可排序的表格组件</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app" v-cloak>
    <v-table :data="data" :columns="columns"></v-table>
    <button @click="handleAddData">添加数据</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="table.js"></script>
<script src="index.js"></script>
</body>
</html>

从index.html中看出我们要准备数组data(表身数组)，column（表头数组）,表头数组中还要标明哪些是可以排序的列。另还要准备一个添加数据的方法handleAddData()。

index.js

var app = new Vue({
    el:'#app',
    data:{
        // columns的每一项是一个对象，其中title和key字段是必填的，用来标识这列的表头标题，
        // key是对应data中列内容的字段名。sortable是选填字段，如果值为true,说明该列需要排序。
        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: '北京市东城区东直门'
            });
        }
    }
});

为了不影响原始数组的数据，在组件中我们要copy一份在组件中操作。

table.js

Vue.component('vTable',{
    props:{
        data: {
            type: Array,
            default:function(){
                  return [];
            }
        },
        columns:{
            type:Array,
            default:function(){
                  return [];
            }
        }
    },
    data:function(){
        return {
            currentColumns: [],
            currentData: []
        }
    },
    // h就是createElement
    // render的时候，需要新建一个table元素，里面包含thead,tbody,然后thead和tbody里面又包含th,tr和tr,td
    // 这里返回的数据trs是一个二维数组包含tr和td
    render:function(h){
        var _this = this;
        var ths = [];
        this.currentColumns.forEach(function(col,index){
              // 如果column里面sortable为真，我们需要标↑,↓，并点击来执行排序，若不为真或没有sortable，就直接渲染column中的title数据
             // 排序的标签在鼠标放上的时候高亮，且当前排序存在的话也要显示高亮，这里我们用一个class:on
             // 排序的方法统一为handleSort()函数，参数为当前column的下标以及排序的方法('asc'或者'desc')
              if( col.sortable ){
                  ths.push(h('th'),[
                      h('span',col.title),
                      // 升序
                      h('a',{
                          class: {
                              on: col._sortType === 'asc'
                          },
                          on:{
                              click: function(){
                                  _this.handleSort(index,'asc');
                              }
                          }
                      },'↑'),
                      // 降序
                      h('a',{
                          class:{
                              on: col._sortType === 'desc'
                          },
                          on: {
                               click: function(){
                                    _this.handleSort(index,'desc');
                                }
                          }
                      },'↓')
                  ]);
              }else{
                  ths.push(h('th',col.title));
              }
        });

        var trs = [];
        // 先遍历所有的column,取出column下的key对应的data数据，新建td元素的值并保存在tds数组中，然后再遍历所有的data形成各行，最终合并在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选项里定义两个方法来赋值，并在mounted钩子内调用
    methods:{
           makeColumns: function(){
                // map() 是JavaScript数组的一个方法，根据传入的函数重新构造一个新数组
               this.currentColumns = this.columns.map(function(col,index){
                   // 添加一个字段标识当前列排序的状态，没有排序的状态为'normal',升序为'asc',降序为'desc'
                   col._sortType = 'normal';
                   // 添加一个字段标识当前列在数组中的索引，方便后面会用到
                   col._index = index;
                    return col;
               });   
           },
           makeData: function(){
              this.currentData = this.data.map(function(row,index){
                  // 添加一个字段标识当前行在数组中的索引，后面会用到
                  row._index = index;
                  return row;
              });
           }，
           handleSort: function(index,type){
              var key = this.currentColumns[index].key;
              // 先把column下面的_sortType先置为normal
              this.currentColumns.forEach(function(col){
                  col._sortType = 'normal';
              });
              // 再更新当前index下的column排序规则
              this.currentColumns[index]._sortType = type;
              // 排序使用JavaScript数组的sort()方法，之所以返回1和-1，而不直接返回a[key] < b[key],也就是true或false,
              // 因为在部分浏览器（比如safari）对sort()的处理不同，而1和-1可以做到兼容
              this.currentData.sort(function(a,b){
                    if( type === 'asc' ){
                        return a[key] > b[key]  ? 1 : -1;
                    }else{
                        return a[key] < b[key] ? -1 : 1;
                    }
              });
           }
    },
    // 父组件修改了data数据，currentData也应该更新，如果某列已经存在排序状态，更新后应该直接处理一次排序  
    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' ){
                      // 最开始同步父组件column数据的时候，在此数据中添加的_index现在用上了
                      this.handleSort(sortedColumn[0]._index,'asc');
                  }else{
                      this.handleSort(sortedColumn[0]._index,'desc');
                  }
            }
        }
    },
    mounted(){
        // v-table初始化调用
        this.makeColumns();
        this.makeData();
    }
});

style.css

[v-cloak]{
    display:none;
}
button{
    margin-top:10px;
    padding:5px 7px;
}
table{
    width: 100%;
    margin-botton: 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;
}

用template来实现以上项目

对比render和template实现，在template中如果要bind:class，那么在v-for里面只能用方法来实现，而render里面直接可以用绝对等于实现。但是template更直观。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可排序的表格组件</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="app" v-cloak>
        <v-table :data="data" :columns="columns"></v-table>
        <button @click="handleAddData">添加数据</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="table.js"></script>
<script src="index.js"></script>
</html>

index.js

var app = new Vue({
    el:'#app',
    data:{
        // columns的每一项是一个对象，其中title和key字段是必填的，用来标识这列的表头标题，
        // key是对应data中列内容的字段名。sortable是选填字段，如果值为true,说明该列需要排序。
        columns:[
            {
                title: '姓名',
                key: 'name',
                width:'15%'
            },
            {
                title: '年龄',
                key: 'age',
                sortable: true,
                width:'15%'
            },
            {
                title: '出生日期',
                key: 'birthday',
                sortable: true,
                width:'15%'
            },
            {
                title: '地址',
                key: 'address',
                width:'55%'
            }
        ],
        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('vTable',{
    props:{
        columns:{
            type: Array,
            default: function () {
                return [];
            }
        },
        data:{
            type: Array,
            default: function () {
                return [];
            }
        }
    },
    // 为了让排序后的columns和data不影响原始数据，也给组件的data选项添加两个对应的数据，组件操作就依赖于它，不对原始数据做任何处理
    data:function () {
        return {
            currentColumns: [],
            currentData:[]
        }
    },
    template:'<table>'
    + '<thead>'
    + '<tr>'
    + '<template v-for="(item,index) in currentColumns" >'
    + '<th v-if="item.sortable"><span>{{ item.title }}</span><a :class="isAscOn(index)" @click="handleSort(index,\'asc\')">↑</a><a :class="isDescOn(index)" @click="handleSort(index,\'desc\')">↓</a></th>'
    + '<th v-else>{{ item.title }}</th>'
    + '</template>'
    + '</tr>'
    + '</thead>'
    + '<tbody>'
    + '<tr v-for="(row,index) in currentData">'
    + '<td>{{row.name}}</td>'
    + '<td>{{row.age}}</td>'
    + '<td>{{row.birthday}}</td>'
    + '<td>{{row.address}}</td>'
    + '</tr>'
    + '</tbody>'
    + '</table>',
    methods:{
        // map()是JavaScript数组的一个方法，根据传入的函数重新构造一个新数组。
        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;
            });
        },
        isAscOn:function (index) {
            if(this.currentColumns[index]._sortType === 'asc'){
                return 'on';
            }else{
                return '';
            }
        },
        isDescOn:function (index) {
            if(this.currentColumns[index]._sortType === 'desc'){
                return 'on';
            }else{
                return '';
            }
        },
        handleSort: function (index,type) {
            var key = this.currentColumns[index].key;
            this.currentColumns.forEach(function (col) {
                col._sortType = 'normal';
            });
            this.currentColumns[index]._sortType = type;
            // 排序使用JavaScript数组的sort()方法，之所以返回1和-1，而不直接返回a[key] < b[key],也就是true或false,
            // 因为在部分浏览器（比如safari）对sort()的处理不同，而1和-1可以做到兼容
            this.currentData.sort(function (a, b) {
                if (type === 'asc') {
                    return a[key] > b[key] ? 1 : -1;
                } else {
                    return a[key] < b[key] ? 1 : -1;
                }
            });
        }
    },
    watch:{
        data:function () {
            this.makeData();
            // 从column中找出哪个是有排序的
            var sortedColumn = this.currentColumns.filter(function (col) {
                return col._sortType !== 'normal';
            });

            if( sortedColumn.length > 0 ){
                if(sortedColumn[0]._sortType === 'asc'){
                    this.handleSort(sortedColumn[0]._index,'asc');
                }else{
                    this.handleSort(sortedColumn[0]._index,'desc');
                }
            }
        }
    },
    mounted(){
        // v-table初始化调用
        this.makeColumns();
        this.makeData();
    }
});

style.css共用一个。

Vue2 排序表格组件 —— render渲染

index.html

index.js

table.js

style.css

用template来实现以上项目

index.html

index.js

table.js

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读