使用elementui表格，项目感悟

一、使用表格第一步

import ElementUI from 'element-ui'

Vue.use(ElementUI)

二、完成第一步，接下来直接引用组件标签了

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

三、修改数据

watch： {

 tableData(data) {
            if (data && !this.tableDataCopy) {
                this.tableDataCopy = data
            }

}

methods： {

 onOrgFilterChange(node) {
            this.tableData = this.tableDataCopy.filter(item => {
                return node.label === item.organization
            })
        },

orgRender(h, node)   {

          return [
                h('span', '所属组织'),
                h(bootTree, {
                    on: {
                        handleNodeClick: this.onOrgFilterChange
                    }
                })
            ]
        }

}

四、表格里有很多参数、事件、方法可以调用，在使用的时候注意返回数据是什么

参考：http://element.eleme.io/#/zh-CN/component/table