vue-cli +elementUI table表格封装

在用elementUI和VUE写的后台系统项目中，经常会用到表格组件，在此，对table进行一次简单的封装，复用，简化代码！
大致页面如下：

直接上代码~
表格组件封装，DataTable.vue

<template>
  <el-table
    ref="table"
    border
    v-bind="$props" 
    v-on="$listeners"
    >
    <el-table-column
      v-if="showSelection"
      type="selection"
      width="55"
      align="center"
    ></el-table-column>
    <el-table-column
      v-if="showIndex"
      label="序号"
      type="index"
      width="55"
      align="center"
      :index="indexMethod"
    ></el-table-column>
    <el-table-column
      v-for="column of computedColumns"
      :key="column.prop + column.label"
      :label="column.label"
      :prop="column.prop"
    >
      <template slot-scope="scope">
        <slot
          :name="getSlotName(column)"
          v-bind="{
            data: data,
            row: scope.row,
            $index: scope.$index,
            column
          }"
        >
          <render-content
            :option="{
              render: column.render,
              scope: scope,
              column: column
            }">
          </render-content>
        </slot>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
const RenderContent = {
  props: {
    option: Object
  },
  render (h) {
    if (this.option.render) {
      return this.option.render(h, this.option.scope)
    }
    const { row, $index } = this.option.scope
    const { column } = this.option
    const property = column.prop
    let value = row[property]
    if (column && column.formatter) {
      return <span>{column.formatter(row, column, value, $index)}</span>
    }
    if (column.type === 'index') {
      value = $index + 1
    }
    if (!value && value !== 0) {
      value = '-'
    }
    return <span>{value}</span>
  }
}
  export default {
    components: {
      RenderContent
    },
    props: {
      columns: {
        type: Array,
        default: () => []
      },
      data: {
        type: Array,
        default: () => []
      },
      showSelection: {
        type: Boolean,
        default: false
      },
      showIndex: {
        type: Boolean,
        default: false
      },
      indexMethod: {
        type: Function
      }
    },
    data() {
      return {
      }
    },
    computed: {
      computedColumns () {
        return this.columns.filter(column =>
          column.showIf ? column.showIf(this.data) : true
        )
      }
    },
    methods: {
      getSlotName (column) {
        if (typeof column.render === 'string') {
          return column.render
        }
        return `${column.prop}-column`
      }
    }
  }
  </script>

组件的使用：

<template>
  <div>
    <div style="width: 800px;">
      <data-table
        :data="tableData"
        :columns="columns"
        showIndex
        showSelection
        @selection-change="handleSelectionChange"
      >
        <template slot="operate-column" slot-scope="scope">
          <el-button plain size="mini" type="primary" icon="el-icon-edit" @click="handleOperate(scope.row)"></el-button>
        </template>
      </data-table>
    </div>
  </div>
</template>
 <script>
 import DataTable from './DataTable.vue'
    export default {
      components: {
        DataTable
      },
      data() {
        return {
          columns: [
            {
              label: '日期',
              prop: 'date'
            },
            {
              label: '姓名',
              prop: 'name'
            },
            {
              label: '地址',
              prop: 'address'
            },
            {
              label: '活动',
              prop: 'activity',
              showIf: () => false
            },
            {
              label: '操作',
              prop: 'operate'
            }
          ],
          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 弄'
          }]
        }
      },
      methods: {
        handleSelectionChange (val) {
          // 勾选
          console.log(val)
        },
        handleOperate (row) {
          // row operate
          console.log(row)
        }
      }
    }
  </script>

先简单封装一下，但是应该也可以用在很多场合了，后续再抽时间补充一下其他的功能，如表格单元格样式，内联表格等等~~~