select,date-picker,month-picker,range-picker,week-picker 在自定义指令中绑定change 事件不生效

[JinPengGeng]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

2.0.0 及 1.5.1等以前版本，我只试到了1.4

Environment

os: win10, npm: 6.12.1 @vue/cli: 4.2.3, brower: chrome 78.0.3904.97（Official Build） （64 ビット）

Reproduction link

Steps to reproduce

参考 重现链接

What is expected?

自定义指令绑定事件，正常生效

What is actually happening?

自定义指令绑定事件，没有效果

---

场景：自定义指令实现所有 validation check统一管理，通过配置文件进行集成，同时绑定触发事件（change、blur...）和 触发参数

eg: v-validate.change="'xxx'"

目前测试结果：
input 、checkbox，checkbox group 绑定正常
select、所有日期相关（date-picker）等绑定失败

临时解决方案：

node_modules\ant-design-vue\es\select\index.js

L119-L122 =>

// FIXME: fire change for select component
fireChange: function fireChange(value) {
    this.$emit('change', value);
},

L253-L257 =>

// FIXME: fire change for select component
// on: getListeners(this),
on:_extends({}, getListeners(this), {
    change: this.fireChange
}),

node_modules\ant-design-vue\es\date-picker\wrapPicker.js

L104-L107 =>

// FIXME: fire change for select component
fireChange: function fireChange(e) {
    this.$emit('change', arguments[0], arguments[1]);
},

L196-L197 =>

// FIXME: fire change for select component
change: this.fireChange,

希望作者大大能够官方提供事件穿透 ：）

[mx4g]

我从1.4.12 升级到1.5.1 ，发现Table 的列用 fixed: "left"会报异常，
异常：Cannot read property 'querySelectorAll' of null"

[JinPengGeng]

我从1.4.12 升级到1.5.1 ，发现Table 的列用 fixed: "left"会报异常，
异常：Cannot read property 'querySelectorAll' of null"

我目前的使用方式，你可以参考一下，另外，定位你的问题，需要你把相关的code贴出来

columns: [
        {
          title: () => {
            return (
              <a-checkbox
                indeterminate={this.indeterminate}
                checked={this.checkAll}
                onChange={this.onCheckAllChange}
              />
            )
          },
          fixed: 'left',
          align: 'center',
          width: 50,
          customRender: (text, row, index) => {
            const obj = {
              children: (
                <a-checkbox
                  checked={row.checked}
                  onChange={e => this.onCheckboxChange(row, e, index)}
                />
              ),
              attrs: {}
            }
            if (index % 12 === 0) {
              obj.attrs.rowSpan = 12
            } else {
              obj.attrs.rowSpan = 0
            }
            obj.class = 'column-top'
            return obj
          }
        }
]

@mx4g

[mx4g]

我从1.4.12 升级到1.5.1 ，发现Table 的列用 fixed: "left"会报异常，
异常：Cannot read property 'querySelectorAll' of null"

我目前的使用方式，你可以参考一下，另外，定位你的问题，需要你把相关的code贴出来

columns: [
        {
          title: () => {
            return (
              <a-checkbox
                indeterminate={this.indeterminate}
                checked={this.checkAll}
                onChange={this.onCheckAllChange}
              />
            )
          },
          fixed: 'left',
          align: 'center',
          width: 50,
          customRender: (text, row, index) => {
            const obj = {
              children: (
                <a-checkbox
                  checked={row.checked}
                  onChange={e => this.onCheckboxChange(row, e, index)}
                />
              ),
              attrs: {}
            }
            if (index % 12 === 0) {
              obj.attrs.rowSpan = 12
            } else {
              obj.attrs.rowSpan = 0
            }
            obj.class = 'column-top'
            return obj
          }
        }
]

@mx4g

const columnsByPhone = [
 {
   title: "用户名",
  dataIndex: "userName",
  width: 100,
  fixed: "left"
},
 {
   title: "名字",
   dataIndex: "nickname"
},
 {
   title: "错误登录次数",
   dataIndex: "loginErrorCount"
 },
 {
   title: "错误登录时间",
   dataIndex: "lastLoginErrorDate"
 },
{
   title: "创建时间",
   dataIndex: "createDate"
 },
 {
   title: "更新时间",
   dataIndex: "updateDate"
 }
];

@JinPengGeng 我这样写的，首列fixed: "left"去掉，就不报异常

[JinPengGeng]

@mx4g

h5 code

<a-table
            :columns="columns"
            :dataSource="data"
          >

js code

columns: [
        {
          title: '用户名',
          dataIndex: 'userName',
          width: 100,
          fixed: 'left'
        },
        {
          title: '名字',
          dataIndex: 'nickname'
        },
        {
          title: '错误登录次数',
          dataIndex: 'loginErrorCount'
        },
        {
          title: '错误登录时间',
          dataIndex: 'lastLoginErrorDate'
        },
        {
          title: '创建时间',
          dataIndex: 'createDate'
        },
        {
          title: '更新时间',
          dataIndex: 'updateDate'
        }
      ],
      data: [
        {
          key: '1',
          userName: '小明',
          nickname: '001',
          loginErrorCount: 0,
          lastLoginErrorDate: new Date().getUTCMilliseconds(),
          createDate: new Date().getMilliseconds(),
          updateDate: new Date().getMilliseconds() + 123456
        },
        {
          key: '2',
          userName: '李莉',
          nickname: '002',
          loginErrorCount: 32,
          lastLoginErrorDate: new Date().getUTCMilliseconds(),
          createDate: new Date().getMilliseconds(),
          updateDate: new Date().getMilliseconds() + 123456
        },
        {
          key: '3',
          userName: '王小帅',
          nickname: '003',
          loginErrorCount: 54,
          lastLoginErrorDate: new Date().getUTCMilliseconds(),
          createDate: new Date().getMilliseconds(),
          updateDate: new Date().getMilliseconds() + 123456
        }
      ],

没有任何问题

[mx4g]

@mx4g

h5 code

<a-table
            :columns="columns"
            :dataSource="data"
          >

js code

columns: [
        {
          title: '用户名',
          dataIndex: 'userName',
          width: 100,
          fixed: 'left'
        },
        {
          title: '名字',
          dataIndex: 'nickname'
        },
        {
          title: '错误登录次数',
          dataIndex: 'loginErrorCount'
        },
        {
          title: '错误登录时间',
          dataIndex: 'lastLoginErrorDate'
        },
        {
          title: '创建时间',
          dataIndex: 'createDate'
        },
        {
          title: '更新时间',
          dataIndex: 'updateDate'
        }
      ],
      data: [
        {
          key: '1',
          userName: '小明',
          nickname: '001',
          loginErrorCount: 0,
          lastLoginErrorDate: new Date().getUTCMilliseconds(),
          createDate: new Date().getMilliseconds(),
          updateDate: new Date().getMilliseconds() + 123456
        },
        {
          key: '2',
          userName: '李莉',
          nickname: '002',
          loginErrorCount: 32,
          lastLoginErrorDate: new Date().getUTCMilliseconds(),
          createDate: new Date().getMilliseconds(),
          updateDate: new Date().getMilliseconds() + 123456
        },
        {
          key: '3',
          userName: '王小帅',
          nickname: '003',
          loginErrorCount: 54,
          lastLoginErrorDate: new Date().getUTCMilliseconds(),
          createDate: new Date().getMilliseconds(),
          updateDate: new Date().getMilliseconds() + 123456
        }
      ],

没有任何问题

因为我做了手机端自适应，用到了window.onresize方法 。
代码：

<template>
 <a-table :columns="columns" :dataSource="data" :scroll="{ x: this.scrollX }">
   <a slot="name" slot-scope="text">{{ text }}</a>
 </a-table>
</template>
<script>
const columns = [
{
   title: "Name",
   dataIndex: "name",
   key: "name",
   scopedSlots: { customRender: "name" }
 },
 {
   title: "Age",
   dataIndex: "age",
   key: "age",
   width: 80
 },
 {
   title: "Address",
   dataIndex: "address",
   key: "address 1",
   ellipsis: true
 },
 {
   title: "Long Column Long Column Long Column",
   dataIndex: "address",
   key: "address 2",
   ellipsis: true
 },
 {
   title: "Long Column Long Column",
   dataIndex: "address",
   key: "address 3",
   ellipsis: true
 },
 {
   title: "Long Column",
   dataIndex: "address",
   key: "address 4",
   ellipsis: true
 }
];

const columnsByPhone = [
{
   title: "Name",
   dataIndex: "name",
   key: "name",
   scopedSlots: { customRender: "name" },
   width: 100,
   fixed: "left"
 },
 {
   title: "Age",
   dataIndex: "age",
   key: "age",
   width: 80
 },
 {
   title: "Address",
   dataIndex: "address",
   key: "address 1",
   ellipsis: true
 },
 {
   title: "Long Column Long Column Long Column",
   dataIndex: "address",
   key: "address 2",
   ellipsis: true
 },
 {
   title: "Long Column Long Column",
   dataIndex: "address",
   key: "address 3",
   ellipsis: true
 },
 {
   title: "Long Column",
   dataIndex: "address",
   key: "address 4",
   ellipsis: true
 }
];

const data = [
 {
   key: "1",
   name: "John Brown",
   age: 32,
   address: "New York No. 1 Lake Park, New York No. 1 Lake Park",
   tags: ["nice", "developer"]
 },
 {
   key: "2",
   name: "Jim Green",
   age: 42,
   address: "London No. 2 Lake Park, London No. 2 Lake Park",
   tags: ["loser"]
 },
 {
   key: "3",
   name: "Joe Black",
   age: 32,
   address: "Sidney No. 1 Lake Park, Sidney No. 1 Lake Park",
   tags: ["cool", "teacher"]
 }
];

export default {
data() {
   return {
     scrollX: 0,
     scrollPhoneX: 900,
     data,
     columns
   };
 },
 beforeMount() {
  this.resize();
   window.onresize = () => {
     this.resize();
   };
 },
 methods: {
   resize() {
     var _this = this;
     _this.clientWidth = document.body.clientWidth;
     if (this.clientWidth < 576) {
       _this.btnNeedTip = false;
       _this.scrollX = _this.scrollPhoneX;
       _this.columns = columnsByPhone;
     } else {
       _this.btnNeedTip = true;
       _this.scrollX = 0;
       _this.columns = columns;
     }
   }
 }
};
</script>

你有邮箱吗？我可以把Demo发给你看看

[mx4g]

@JinPengGeng
antd-demo.zip
太棒了，原来可以发文件。发给你看看

[tangjinzhou]

我从1.4.12 升级到1.5.1 ，发现Table 的列用 fixed: "left"会报异常，
异常：Cannot read property 'querySelectorAll' of null"

你可以新开issue 讨论这个问题，不同的问题不要在一个issue下讨论

@mx4g

[mx4g]

我从1.4.12 升级到1.5.1 ，发现Table 的列用 fixed: "left"会报异常，
异常：Cannot read property 'querySelectorAll' of null"

你可以新开issue 讨论这个问题，不同的问题不要在一个issue下讨论

@mx4g

好的

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.