vue 仿el-table原理实现表格

element-ui是国内最流行的的vue开源框架，el-table组件在element-ui整个框架中是最复杂、最重要的部分。其中涉及到的知识有JSX，render渲染函数，组件间的状态管理等等。出于好奇和挑战，在网上受教于el的源代码以及网上相关内容资料。完成了一个简单基础的table组件 就叫 sd-table吧。

支持功能： 自定义列、支持自定义插槽、支持自定义排序、支持全选、多选、分页回调、宽高样式等。

el-table 源码传送门：element: Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。 - Gitee.com

1.效果及使用方法

1.1 使用方法：

使用方法如下，看看是不是特别熟悉？与 el-table是否类似呢？

<sd-table :data = "tableData"
            ref="sdTable"
            :width="'800'"
            :height="'500'"
            :total="1000"
            :current-page="currentPage"
            @selection-change="handleSelectionChange"
            @loadMore = 'loadMore'
  >
    <sd-table-column  type="selection" width="20">
    </sd-table-column>
    <sd-table-column  width="100" label="solt列">
        <template slot-scope="scope">
          <img src="../assets/vip-icon-hui-5.png"  style="width: 25px">
          <span>{
  { scope.row.name }}</span>
        </template>
    </sd-table-column>
    <sd-table-column prop="name" label="姓名" width="200" sortable></sd-table-column>
    <sd-table-column prop="date" label="日期" width="200" sortable></sd-table-column>
    <sd-table-column  prop="address" label="地址" ></sd-table-column>
  </sd-table>

        1.2效果图

2.代码

2.1  sd-table-body.js

        sd-table-body 主要是渲染整体表格，使用render 函数 循环二维数组 遍历tr行 遍历 td列。

export default {
  name:'sd-table-body',
  computed:{
    table(){
      return this.$parent
    }
  },
  props:{
    store: {
      require: true
    }
  },
  methods:{
    getBodyCellStyle(column){
      return {
        width: column.width + 'px',
        'text-align': column.align
      }
    },
  },
  render(h) {
    let tableData = this.table.tableData ;
    let columns = this.store.getColumns() ;
    let tableWidth = this.store.getTableWidth() ;
    return (
      <table cellspacing="0" border='0' cellpadding="0" style={
  {width: tableWidth + 'px'}}>
        {tableData.map((row, index) =>
          <tr  class={['sd-table-tr',row.$checked?'sd-table-tr-choose':'']}>
            {columns.map(column => <td class={'sd-table-body__td'} style={this.getBodyCellStyle(column)}>
              <div>{column.renderCell(row, index)}</div>
            </td>)}
          </tr>)
        }
      </table>
    )
  }
}

2.2  sd-table-column.js

        sd-table-column.js 此组件主要是渲染 列相关内容，判断type 是selection或 index 或者是自定义插槽。若type=“selection” 为多选框，type=“index” 为 行序号 自定义插槽则直接显示自定义插槽内容，插槽内容可以为组件或html。

代码如下：

let columnIdSeed = 0 ;
export default  {
  name: 'sd-table-column',
  computed:{
    tableColumnId(){
      return 'columnId-' + (columnIdSeed++)
    },
    table(){
      return this.$parent
    },
  },
    props:{
      label: String,
      prop: String,
      width: String,
      align: String,
      type: String,
      sortable:{
        type:Boolean,
        default:false,
      }
    },
  data(){
    return{
      column:{},
      value_2: false,
    }
  },
    methods:{
      renderCell(data,index){
        let curIndex = index + 1 ;
        if(this.type ==='index') {
          return curIndex ;
        }
        if(this.t