element的列表树形数据中添加复选框并增加render与slot支持

前言：

        对element的列表二次进行封装，让他能支持树形数据中添加复选框，并支持render与slot的使用。

实现效果：

 

实现步骤：

1、引入封装代码 checkTable

import checkTable from '@/views/pages/system/user/checkTable'
components:{
    checkTable
  },

2、页面调用，使用插槽，最大的还原element的写法

template内部：


      
        
      
      
        
      
      
        
      
    

data:
data(){
    return{
    //列表数据，带children的是有子级的
      tableData:[
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
            id: 31,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id: 32,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
        //表头
      columns:[
        {slot:'date'},
        {slot:'name'},
        {slot:'address'},
      ]

3、页面调用-js中定义

data:
data(){
    return{
    //列表数据，带children的是有子级的
      tableData:[
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
            id: 31,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id: 32,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
        //表头
      columns:[
        {
           prop:'name',
           title:'姓名',
           align:'center',
           width:150,
        },
        ...
      ]

封装源码：checkTable.vue