el-table表格中使用render渲染日期組件

問題描述

需求是在table中使用日期組件，table是已經封裝好的，通過render渲染el-date-picker組件

問題解決

• 頁面渲染

// 注意 :column="item" 其中item是tableData的一項
<template slot-scope="scope">
            <ex-slot v-if="item.render" :render="item.render" :column="item" :row="scope.row" :index="scope.$index" />
            <span v-else v-title>{{ scope.row[item.key] }}</span>
</template>

• 自定義組件

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)
  }
}

• render日期組件

supportDate(item) {
      item.render = (h, params) => {
        return h('el-date-picker', {
          props: {
            placeholder: '請選擇',
            value: params.row[params.column.key],
            'value-format': 'yyyy-MM-dd'
          },
          on: {
            input: val => {
              // change事件無效，blur事件也不合適，就使用input了
              this.insideTableData[params.index][params.column.key] = val
            }
          }
        })
      }
      return item
    }