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
    }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM