首页 > 其他 > 详细

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

时间:2021-06-02 21:15:18      阅读:21      评论:0      收藏:0      [点我收藏+]

问题描述

需求是在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
    }

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

原文:https://www.cnblogs.com/codebook/p/14842772.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!