一个表格组件-vuejs示例

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

1、新建一个demo和vue实例

<!--html-->
<div id="demo"></div>

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

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

<!--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必须是一个函数。

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
    }
  }
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Go语言的标准输入-scan 和bufio

除了f mt 和 os ,我们还需要用到 bufio 来实现带缓冲输入(input)和输出(output)读取用户的输入数据 我们怎样读取用户从键盘(控制台)输...

559110
来自专栏小壮和前端

es6之深入理解promise对象

10300
来自专栏大数据钻研

前端编码规范

基本原则 结构、样式、行为分离 统一缩进(建议 两个空格) 文件编码统一 不带BOM的UTF-8 一律使用小写字母 省略外链资源 URL 协议部分(FTP等其他...

38470
来自专栏前端知识分享

第208天:jQuery框架封装(一)

1.1冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象或者body)的顺序触发。

32240
来自专栏Golang语言社区

空结构体struct{}解析

本篇文章转自David的"The empty struct"一文,原文地址链接是http://dave.cheney.net/2014/03/25/the-em...

65690
来自专栏debugeeker的专栏

用xerces-c来进行xml schema校验

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuzhina/article/detai...

12610
来自专栏技术博文

mysql中int长度的意义

疑问: mysql的字段,unsigned int(4), 和unsinged int(5), 能存储的数值范围是否相同。如果不同,分别是多大? 答: 无论是i...

34040
来自专栏飞扬的花生

JQuery常用方法总结

1.json的创建方式 <script> $(function () { //第一种 var my = new Peop...

24470
来自专栏向治洪

React 之props属性

React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性(Props)来实现功能,但内部细节可能有非常复杂的实现。 可以使用 JSX ...

23350
来自专栏coding

2018年Go语言实战笔记2string字符串处理time时间处理指针strconv 类型转换rand 随机数函数几个实例

接触一门新语言,了解其语法结构,常用的包是必须的,同时也是无聊的。有过其他编程语言基础的同学,学习go的语法很简单,参照 go文档 过一遍就能对go的语法有大致...

10210

扫码关注云+社区

领取腾讯云代金券