关于ElementUI自定义Table支持render

export default {
  name: 'TableHeadCell',
  functional: true,
  props: {
    render: Function,
    index: Number,
    column: Object,
    scopeColumn: Object,
    columns: Array,
    data: Array
  },
  render: (h, ctx) => {
    if (typeof ctx.props.render === 'function') {
      const params = {
        index: ctx.props.index,
        column: ctx.props.column,
        scopeColumn: ctx.props.scopeColumn,
        columns: ctx.props.columns,
        data: ctx.props.data,
        _self: ctx
      }
      return ctx.props.render.call(ctx.parent.$parent, h, params)
    } else {
      return h('span', ctx.props.column.label || ctx.props.column.prop || ctx.props.scopeColumn.property)
    }
  }
}

export default {
  name: 'TableCell',
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: Object,
    scopeColumn: Object,
    columns: Array,
    data: Array
  },
  render: (h, ctx) => {
    if (typeof ctx.props.render === 'function') {
      const params = {
        row: ctx.props.row,
        index: ctx.props.index,
        column: ctx.props.column,
        scopeColumn: ctx.props.scopeColumn,
        columns: ctx.props.columns,
        data: ctx.props.data,
        _self: ctx
      }
      return ctx.props.render.call(ctx.parent.$parent, h, params)
    } else {
      if (typeof ctx.props.column.formatter === 'function') {
        return h('span', 
          ctx.props.column.formatter(
            ctx.props.row, ctx.props.scopeColumn,
            ctx.props.row[ctx.props.column.prop],
            ctx.props.index
          )
        )
      }
      return h('span', ctx.props.row[ctx.props.column.prop])
    }
  }
}

<template>
  <el-table
    ref="targetTable"
    :data="data"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <slot slot="empty" name="empty" />
    <slot slot="append" name="append" />
    <slot name="columns">
      <el-table-column
        v-for="column in computedColumns"
        :key="column.prop"
        v-bind="column"
      >
        <template slot="header" slot-scope="scope">
          <tabel-head-cell :column="column" :scope-column="scope.column"
            :index="scope.$index" :render="column.headerRender" :columns="columns" :data="data" />
        </template>
        <template slot-scope="scope">
          <tabel-cell :row="scope.row" :column="column" :scope-column="scope.column"
            :index="scope.$index" :render="column.render" :columns="columns" :data="data" />
        </template>
      </el-table-column>
    </slot>
  </el-table>
</template>

<script>
import TabelCell from './TableCell'
import TabelHeadCell from './TableHeadCell'
const TATGET_TABLE_REF = 'targetTable'
export default {
  name: 'RenderTable',
  components: { TabelHeadCell, TabelCell },
  props: {
    columns: { type: Array, default: () => {} },
    data: { type: Array, default: () => {} }
  },
  computed: {
    computedColumns() {
      return this.columns && this.columns.filter(column => column.visible === undefined
        || column.visible === null || !!column.visible)
    }
  },
  methods: {
    // 表格原始方法
    clearSelection() {
      this.$refs[TATGET_TABLE_REF].clearSelection()
    },
    toggleRowSelection(row, selected) {
      this.$refs[TATGET_TABLE_REF].toggleRowSelection(row, selected)
    },
    toggleAllSelection() {
      this.$refs[TATGET_TABLE_REF].toggleAllSelection()
    },
    toggleRowExpansion(row, expanded) {
      this.$refs[TATGET_TABLE_REF].toggleRowExpansion(row, expanded)
    },
    setCurrentRow(row) {
      this.$refs[TATGET_TABLE_REF].setCurrentRow(row)
    },
    clearSort() {
      this.$refs[TATGET_TABLE_REF].clearSort()
    },
    clearFilter(columnKey) {
      this.$refs[TATGET_TABLE_REF].clearFilter(columnKey)
    },
    doLayout() {
      this.$refs[TATGET_TABLE_REF].doLayout()
    },
    sort(prop, order) {
      this.$refs[TATGET_TABLE_REF].sort(prop, order)
    }
  }
}
</script>

<template>
    <render-table
      :columns="columns"
      :data="list"
    />
</template>
<script>
import RenderTable from '_c/RenderTable'
export default {
  name: 'RenderTableTest',
  components: { RenderTable},
  data() {
    return {
      columns: [
        {
          prop: 'appId',
          label: '应用编号',
          fixed: true,
          align: 'center'
        },
        {
          prop: 'appName',
          label: '应用名称',
          align: 'center'
        },
        {
          prop: 'enabled',
          label: '是否启用',
          align: 'center',
          formatter(row, column, cellValue, index) {
            return cellValue ? '是' : '否'
          }
        },
        {
          fixed: 'right',
          label: '操作',
          align: 'center',
          render(h, { row }) {
            const _this = this
            return h('el-button-group', [
              h('el-button', {
                props: {
                  size: 'mini',
                  type: 'primary'
                },
                on: {
                  'click'() {
                    _this.handleEdit(row)
                  }
                }
              }, '编辑')
            ])
          }
        }
      ],
      list: []
    }
  },
  methods: {
    handleEdit(row) {
    }
  }
}
</script>

getheaderTime(h) {
      const This = this
      return h('div', {
      },
        ['告警时间',
          h('span', {
            class: 'iline-table-sort'
          },
            [
              h('i', {
                'class': {
                  'el-icon-caret-bottom': This.orderByType === 'desc',
                  'el-icon-caret-top': This.orderByType === 'asc',
                  'active': This.orderBy === 'daqTime'
                },
                attrs: {
                  'orderByType': 'desc',
                  'orderType': 'daqTime'
                },
                on: {
                  click: This.clickHandler
                },
                style: {
                  fontSize: '22px'
                }
              })
            ]
          )
        ])
    }