一个表格组件-vuejs示例

分析vuejs官网上一个表格组件的实现过程。
原址：https://cn.vuejs.org/v2/examples/grid-component.html

1、新建一个demo和vue实例

//js
var demo=new Vue({
  el:"#demo"
});

2、新建一个Vue实例，并用data声明一个数据对象，定义表格所需的数据

var demo=new Vue({
    el:"#demo",
    data:{
        //表格的头部部分数据
        gridColumns: ['name', 'power'],
        //表格的主体部分数据
        gridData: [
             { name: 'Chuck Norris', power: Infinity },
             { name: 'Bruce Lee', power: 9000 },
             { name: 'Jackie Chan', power: 7000 },
             { name: 'Jet Li', power: 8000 }
        ],
        //input组件中v-model双向绑定的数据值
        searchQuery : ''
    }
});

3、注册一个子组件组件demo-grid，并在父实例的模块中以自定义元素的形式使用
要让子组件使用父组件的数据，我们需要通过props选项。子组件要显式的用props选项声明它期待获得的数据

     
     

          
          Search 
     

     
     
          :data="gridData"
          :columns="gridColumns"
          :filter-key="searchQuery"
     >


//js 创建一个子组件
Vue.component("demo-grid",{
  template:"#grid-template",   
    props: {     
      //获得父组件的数据并定义了数据类型
      data: Array,
      columns: Array,
      filterKey: String
    },
});

4、X-template
定义模版的方式：在 JavaScript 标签里使用 text/x-template 类型，并且指定一个 id="grid-template"，所定义的就相当于上文子组件中template的内容

5、为子组件（demo-grid）继续添加选项对象
①data
定义子组件内部的数据对象。
子组件这里的data必须是一个函数。

data: function () {
  //定义一个sortOrders空对象
  var sortOrders = {};
  //遍历columns值(也就是父组件中的数据值['name', 'power']),将每一项的值设为1，即:{name:1,power:1}
  this.columns.forEach(function (key) {
    sortOrders[key] = 1
  });
  //返回一个空字符串值sortKey(下文会讲作用)和sortOrders对象
  return {
    sortKey: '',
    sortOrders: sortOrders
  };
},

②methods方法

methods: {
  //当在父组件tr那里点击了click事件，就会调用这个函数
  sortBy: function (key) {
    this.sortKey = key
    this.sortOrders[key] = this.sortOrders[key] * -1
  }
}

③computed计算属性

  computed: {
    filteredData: function () {
      var sortKey = this.sortKey
      var filterKey = this.filterKey && this.filterKey.toLowerCase()
      var order = this.sortOrders[sortKey] || 1
      var data = this.data
      if (filterKey) {
        /*原本的data数据值
        * data:[
        *   { name: 'Chuck Norris', power: Infinity },
        *   { name: 'Bruce Lee', power: 9000 },
        *   { name: 'Jackie Chan', power: 7000 },
        *   { name: 'Jet Li', power: 8000 }
        * ]
        */  
        //filter函数方法会筛选出data数组中为true的项
        data = data.filter(function (row) {
        //然后将里面的每一项（也就是对象）中的键值进行与输入的filterKey值进行匹配搜索，
        //大于-1则将该项返回组成新的data
          return Object.keys(row).some(function (key) {
            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
          })
        })
      }
      if (sortKey) {
        //复制一份data数据，然后进行sort排序，组成新的表格排序
        data = data.slice().sort(function (a, b) {
          a = a[sortKey]
          b = b[sortKey]
          return (a === b ? 0 : a > b ? 1 : -1) * order
        })
      }
      return data
    }
  },

④filters

 filters: {
    capitalize: function (str) {
      return str.charAt(0).toUpperCase() + str.slice(1)
    }
  }

6、最后子组件就是这样：

Vue.component('demo-grid', {
  template: '#grid-template',
  props: {
    data: Array,
    columns: Array,
    filterKey: String
  },
  data: function () {
    var sortOrders = {}
    this.columns.forEach(function (key) {
      sortOrders[key] = 1
    })
    return {
      sortKey: '',
      sortOrders: sortOrders
    }
  },
  computed: {
    filteredData: function () {
      var sortKey = this.sortKey
      var filterKey = this.filterKey && this.filterKey.toLowerCase()
      var order = this.sortOrders[sortKey] || 1
      var data = this.data
      if (filterKey) {
        data = data.filter(function (row) {
          return Object.keys(row).some(function (key) {
            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
          })
        })
      }
      if (sortKey) {
        data = data.slice().sort(function (a, b) {
          a = a[sortKey]
          b = b[sortKey]
          return (a === b ? 0 : a > b ? 1 : -1) * order
        })
      }
      return data
    }
  },
  filters: {
    capitalize: function (str) {
      return str.charAt(0).toUpperCase() + str.slice(1)
    }
  },
  methods: {
    sortBy: function (key) {
      this.sortKey = key
      this.sortOrders[key] = this.sortOrders[key] * -1
    }
  }
})