前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一个表格组件-vuejs示例

一个表格组件-vuejs示例

作者头像
Ewall
发布2018-09-04 15:37:30
1.4K0
发布2018-09-04 15:37:30
举报
文章被收录于专栏:vue学习

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

1、新建一个demo和vue实例

代码语言:javascript
复制
<!--html-->
<div id="demo"></div>

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

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

代码语言:javascript
复制
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,并在父实例的模块中以自定义元素<demo-grid></demo-grid>的形式使用 要让子组件使用父组件的数据,我们需要通过props选项。子组件要显式的用props选项声明它期待获得的数据

代码语言:javascript
复制
<!--html-->
<div id="demo">
     <!--搜索框-->
     <form id="search">
          <!--用v-model实现了input输入框数据的双向绑定-->
          Search <input name="query" v-model="searchQuery">
     </form>

     <!--表格-->
     <demo-grid
          <!--这里是绑定了几个自定义属性,属性值为Vue实例data中的数据值-->
          :data="gridData"
          :columns="gridColumns"
          :filter-key="searchQuery"
     ></demo-grid>
</div>

//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的内容

代码语言:javascript
复制
<!--html-->
<!--X-template定义的模板放到html标签中-->

<script type="text/x-template" id="grid-template">
  <table>
    <thead>
      <tr>
        <th
          <!--遍历columns数组(即:["name","power"]),取出每一项-->
          v-for="key in columns"
          <!--注册一个click事件,事件函数为sortBy并将点击的相应的键值传参到函数里面去-->
          @click="sortBy(key)"
          <!--如果两者相等,则应用active样式-->
          :class="{ active: sortKey == key }"
        >
         <!--使用capitalize过滤值-->
          {{ key | capitalize }}
         <!--箭头符号样式-->
          <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"></span>
        </th>
      </tr>
    </thead>
    <tbody>
      <!--遍历计算属性中filteredData计算后返回的data值-->
      <tr v-for="entry in filteredData">
        <td v-for="key in columns">
          {{entry[key]}}
        </td>
      </tr>
    </tbody
  </table>
</script>

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

代码语言:javascript
复制
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方法

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

③computed计算属性

代码语言:javascript
复制
  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

代码语言:javascript
复制
 filters: {
    capitalize: function (str) {
      return str.charAt(0).toUpperCase() + str.slice(1)
    }
  }

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

代码语言:javascript
复制
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
    }
  }
})
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.07.23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档