ant design vue的customRender()方法中使用$createElement提示undefined
报错信息如下:
TypeError: Cannot read properties of undefined (reading '$createElement')
原因:
如果index.vue文件中是从另一个columns.js的文件中引用的列配置,在columns.js文件中的customRender()方法中使用$createElement,就会报错
解决方法:
在index.vue文件的“export default”对象中,就能调用$createElement()方法,即:
1、index.vue文件正常从另一个columns.js的文件中引用的列配置;
2、然后在index.vue的created()方法,重写需要使用$createElement()方法的列对象的customRender()方法
代码片段示例:
columns.js
```
export default {
[
{
title: '订单编号',
dataIndex: 'orderNumber',
width:190,
fixed: 'left',
customRender:(text, record, index, column)=>{
//一个订单包含多个商品,需要做行合并
const obj = {
children: text,
attrs:{rowSpan:parseInt(record.rowSpan)}
};
return obj;
}
},
{
title: '商品名称',
dataIndex: 'productName',
width:220,
fixed: 'left',
customRender:(text, record, index, column)=>{
return {children: text,attrs: {rowSpan:parseInt(record.rowSpan)}};
}
},
]
}
```
index.vue
```
import columns from "./columns";
export default {
data() {
return {
columns: columns,
}
},
created() {
this.setOrderrNumClickEvent();
},
methods: {
setContractNumClickEvent(){
//由于在columns.js文件中无法使用$createElement方法,所有在这里重写customRender方法
this.columns[0].customRender=(text, record, index, column)=>{
let _this = this
const obj = {
children: _this.$createElement('a', {
domProps: {
innerHTML: text
},
on: {
click: function() {
_this.onOrderDetail(record)
}
}
}),
attrs:{rowSpan:parseInt(record.rowSpan)}
};
return obj;
}
},
onOrderDetail(orderInfo){
console.log("order detail show");
}
}
}
```