zoukankan      html  css  js  c++  java
  • 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
        }
    
  • 相关阅读:
    VLAN应用实例
    eNSP 简介及基础操作
    管道符、重定向
    使用Bind提供域名解析服务-DNS
    Samba服务
    虚拟网站主机功能
    springboot接受表单400错误
    Java方法遍历一次数组返回两个结果(最大值与最小值)
    Java异常总结
    Java内部类
  • 原文地址:https://www.cnblogs.com/codebook/p/14842772.html
Copyright © 2011-2022 走看看