vue+element ui table組件封裝,使用render渲染

後臺管理常常會用到表格，一開始封裝了一個經常使用的功能性表格，點擊這裏；

後來因爲需求增長，在表格中還會用到switch，select，input等多種組件，每次都要在html中增長<el-table-column></el-table-column>， 維護起來至關麻煩，就想到了使用render渲染。

 組件內部封裝代碼：

<template>
  <el-table :data="tableData" size="medium" fit :header-cell-style="{height: '40px',padding: '0',background: '#f7f9fa','font-size': '12px',color: '#8590a6'}" :row-style="{'font-size': '12px',color: '#212121'}" ref="multipleTable" border stripe @sort-change="handleSort" @filter-change="filterHandler" @row-click="handleRowClick">
    <el-table-column v-for="(th, key) in tableHeader" :key="key" :prop="th.prop" :label="th.label" :fixed="th.fixed" :sortable="th.sortable?'custom':false" :filters="th.filters" :column-key="th.columnKey" :filtered-value="th.filteredValue" :filter-multiple="th.filterMultiple" :min-width="th.minWidth" align="center">
      <template slot-scope="scope">
        <ex-slot v-if="th.render" :render="th.render" :row="scope.row" :index="scope.$index" :column="th" />
        <span v-else>{{ scope.row[th.prop] || '-' }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  // 自定義內容的組件
  var exSlot = { functional: true, props: { row: Object, render: Function, index: Number, column: { type: Object, default: null } }, render: (h, data) => { const params = { row: data.props.row, index: data.props.index } if (data.props.column) params.column = data.props.column return data.props.render(h, params) } } export default { name: 'comp-table', components: { exSlot }, props: { // 表格數據
 tableData: { type: Array, default: function () { return [] } }, // 表頭數據
 tableHeader: { type: Array, default: function () { return [] } } }, methods: { // 排序事件
 handleSort (sort) { this.$emit('sort-events', sort) }, // 篩選事件
 filterHandler (filters) { this.$emit('filter-events', filters) }, // 某一行被點擊
 handleRowClick (row) { this.$emit('click-events', row) } } } </script>

在模板中引用：

<template>
    <compTable :tableHeader="tableHeader" :tableData="tableData" @sort-events="handleSort" @filter-events="filterHandler" @click-events="handleClick"
    />
</template>

<script> import compTable from '@/components/compTable' export default { components: { compTable }, data () { return {
　　　　　　　// 數據結構
　　　　　　　tableData: [], // 爲請求到的table數據 tableHeader: [ // 表頭信息，可根據minWidth修改寬度 　　　　　{ prop: 'uid', label: '訂單號', minWidth: '160px' }, { prop: 'peopleNumber', label: '人數', sortable: 'custom', minWidth: '75px' }, { prop: 'source', label: '來源', filters: sourceData, columnKey: 'sourceList', minWidth: '90px', render: (h, params) => {return h('span',params.row.source) } } } } } </script>