ant design vue的customRender()方法中使用$createElement提示undefined

发布时间 2023-06-21 15:56:03作者: 我的小苹果

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");
        }
    }
}
```