问题描述
通过render函数进行对表格自定义模板,在使用过程中遇到了Error in v-on handler: "TypeError: Cannot read property ‘changeStatus’ of null"这种类似的问题,产生错误的代码
render: (h, params) => {
const row = params.row;
const value = row.status === 2 ? false : true;
return h('div', [
h('i-switch',{
props: {
type: 'primary',
size: 'small',
value: value,
},
on: {
'on-change': function (value) {
let data = {};
data['id'] = row.id;
data['status'] = value ? 1 : 2;
this.changeStatus(data)//此为自定义修改表格字段的状态的函数
this.$Message.info('hahahh')
}
}
},'')
]);
}
原因分析:
错误原因是因为on-change函数里面的this的作用域,this需要击穿到外面才能用this引用changeStatus方法。
解决方案:
一、使用箭头函数
做如下修改
render: (h, params) => {
const row = params.row;
const value = row.status === 2 ? false : true;
return h('div', [
h('i-switch',{
props: {
type: 'primary',
size: 'small',
value: value,
},
on: {
'on-change': (value) =>{
let data = {};
data['id'] = row.id;
data['status'] = value ? 1 : 2;
console.log(value)
this.changeStatus(data);//此为自定义修改表格字段的状态的函数
}
}
},'')
]);
}
二、使用let self = this
做如下修改
render: (h, params) => {
const row = params.row;
const value = row.status === 2 ? false : true;
let self=this;//在这里定义let self=this
return h('div', [
h('i-switch',{
props: {
type: 'primary',
size: 'small',
value: value,
},
on: {
'on-change': function (value) {
//let self=this;
let data = {};
data['id'] = row.id;
data['status'] = value ? 1 : 2;
self.changeStatus(data)//此为自定义修改表格字段的状态的函数
self.$Message.info('hahahh')
}
}
},'')
]);
}