如何使用renderHeader实现el-date-picker的数据绑定和事件触发

Question

问题描述

如何使用renderHeader实现el-date-picker的数据绑定和事件触发

问题出现的环境背景及自己尝试过哪些方法

数据可以绑定成功，但是change事件不能触发，blur事件可以触发

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<template>
<div>

<el-table border fit :data="tableData">
  <el-table-column
    v-for="(item,index) in tableHeader"
    :key="index"
    :label="item.label"
    :prop="item.prop"
    :render-header="renderHeader"
  ></el-table-column>
</el-table>
输入：<el-input v-model="searchKeys"></el-input>

</div>
</template>
<script>
export default {
data() {

return {
  tableData: [],
  tableHeader: [
    {
      prop: "name",
      label: "姓名",
      sortable: true,
      sortMethod: this.handleNameSort
    },
    {
      prop: "province",
      label: "省份",
      minWidth: "120"
    },
    {
      prop: "city",
      label: "市区",
      minWidth: "120"
    },
    {
      prop: "address",
      label: "地区",
      minWidth: "150"
    },
    {
      prop: "zip",
      label: "邮编",
      minWidth: "120"
    }
  ],
  searchKeys: ""
};

},
methods: {

renderHeader(h, { column, $index }) {
  return h(
    "div",[
    h("div", column.label),
    h("el-date-picker", {
      props: {
        type: "date",
        format: "yyyy-MM-dd",
        valueFormat: 'yyyy-MM-dd'
      },
      attrs: {
        value: this.searchKeys, // 处理默认显示的,
        onClick(){
            vm.$emit('pick', new Date())
        }
      },
      event:{
          change(){
              console.log(11)
          }
      },
      on: {
        click(){
            console.log(11)
        },
        change: (e)=> {
            if(value){
                console.log(e.value);
            }
        },
        blur(e) {
            console.log(e.value)
        }
      }
    })
    ]
  );
}

}
};
</script>

你期待的结果是什么？实际看到的错误信息又是什么？

如何触发change事件，并进行数据交互

Answer 1

建议你看下element-ui的版本，如果是2.4.10以上，直接支持<template/>模板