首页 > 其他分享 >ant design vue的customRender()方法中使用$createElement提示undefined

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

时间:2023-06-21 16:00:14浏览次数:49  
标签:index vue undefined record customRender createElement columns

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

标签:index,vue,undefined,record,customRender,createElement,columns
From: https://www.cnblogs.com/mark946/p/17496461.html

相关文章

  • 【vue3】实现el-tree组件
     禾小毅csdn博客【vue3】实现el-tree组件,将不同层级的箭头修改成自定义图标的组件封装及调用【vue3】实现简易的“百度网盘”文件夹的组件封装实现【vue3】实现公共搜索组件,在当前页搜索的路由跳转不能改变当前值的操作,使用bus/event-emitter派发器......
  • vue WebUploader 分块上传
    ​文件夹数据库处理逻辑public class DbFolder{    JSONObjectroot;       public DbFolder()    {        this.root= new JSONObject();        this.root.put("f_id", "");        this.root.put("f_nameLoc", "根......
  • vue前端预览pdf并加水印、ofd文件,控制打印、下载、另存,vue-pdf的使用方法以及在开发中
    根据公司的实际项目需求,要求实现对pdf和ofd文件的预览,并且需要限制用户是否可以下载、打印、另存pdf、ofd文件,如果该用户可以打印、下载需要控制每个用户的下载次数以及可打印的次数。正常的预览pdf很简单,直接调用浏览器的预览就可以而且功能也比较全,但是一涉及到禁止用户打印、......
  • vue 视频隐藏controls功能按钮
     /*video默认全屏按钮*/video::-webkit-media-controls-fullscreen-button{display:none!important;}/*video默认aduio音量按钮*/video::-webkit-media-controls-mute-button{display:none!important;}/*video默认setting按钮*/video::-internal-media-control......
  • vue devtools安装及使用
    (1)chrome商店下载进入浏览器的设置:或者直接进入该网址:https://chrome.google.com/webstore/search/vuedevtools?hl=zh-CN(2)重启项目,重新按F12,可以发现多了个vue,双击进入:......
  • vue项目主题切换参考
    1.https://blog.csdn.net/czc1997/article/details/1261715412.https://www.jb51.net/article/272615.htm3.https://www.jb51.net/article/213871.htm4.https://www.cnblogs.com/johu/p/15394798.html全局引入在main.js中引入编译的样式文件import"@/assets/gulptheme/FEB84......
  • 关于vite创建vue3项目@代替src失效的问题
    用vite创建的vue3项目,用@来代替src不生效。报错:[vite]Internalservererror:Failedtoresolveimport"@/views/xxxxxxxxxxxxx"from"src\views\dashboard\index.vue".Doesthefileexist?解决的方法是:先安装pathnpminstall--save-dev@type/node在vite.co......
  • vue3+vite+TS搭建项目
    安装npm安装方式npminitvue@latestpnpm安装方式(二选一)pnpmcreatevue@latest然后设置项目名称,接着选择自己需要的配置,安装完成......
  • Electron Vue Vite 开发桌面应用
    我需要使用Electron,VUE3,Vite开发一个桌面应用,接收来自串口的数据,并使用Plotly绘制随时间变化的曲线,请提供开发步骤,项目文件结构好的,以下是一个基本的Electron+Vue3+Vite应用的开发步骤:确保您已经安装了Node.js和npm。安装VueCLI:npminstall-g@vue/cli创建......
  • vue使用vue-seamless-scroll自动滚动插件
    首先运行命令npminstallvue-seamless-scroll--savetemplate:<divclass="publicNotification"@click="toDetail($event)">   <vue-seamless-scroll:class-option="publicNotificationOption":data="publicNotification&quo......