bug集：vue引入elementUI树形控件报错

最新推荐文章于 2024-06-05 16:20:01 发布

原创最新推荐文章于 2024-06-05 16:20:01 发布 · 616 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bug

bug集专栏收录该内容

1 篇文章

订阅专栏

本文介绍了解决在Vue项目中使用JSX语法遇到的渲染错误问题。通过安装babel-plugin-transform-vue-jsx、babel-helper-vue-jsx-merge-props和babel-plugin-syntax-jsx等依赖，并在.babelrc文件中添加transform-vue-jsx控件，可以确保项目正确支持JSX语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bug：renderContent渲染函数返回html代码报错。

解决：使用render-content指定渲染函数，得环境支持 JSX 语法，只要正确地配置了相关依赖，就可以正常运行。

一、安装下列依赖：

npm install babel-plugin-transform-vue-jsx

npm install babel-helper-vue-jsx-merge-props

npm install babel-plugin-syntax-jsx

二、在babelrc中添加控件"transform-vue-jsx".

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

BayFeng

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

ElementUI Tree树形控件renderContent return时报错

weixin_33911824的博客

06-20

3517

问题描述: 使用Tree树形控件使用render-content渲染时return后报错或npm run dev时候报错,报错信息相同,如下: 问题分析: renderContent函数中需要使用jsx语法,需要安装vue中的jsx的插件transform-vue-jsx才支持jsx的写法解决方法: 1:安装相关依赖: npm install babel-plugin-tra...

云E办Springboot+vue——前端项目完整版（含源码）

08-10

5万+

本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项

参与评论您还未登录，请先登录后发表或查看评论

Vue+Element-UI树形控件报错：“TypeError: this.$refs.tree is undefined“

xiaozhuzhuyang的博客

04-13

3179

Vue+Element-UI树形控件报错：“TypeError: this.$refs.tree is undefined” 报错信息：报错场景：使用axios发送异步请求获得角色的所有权限：将权限赋值到一个数组中：这里我的想法是在弹出会话框前使用 this.$refs.tree.setCheckedKeys(this.functionList); 勾选上角色所有权限效果图：解决过程：一开始我使用的是：:default-checked-keys="functionList" 后来

ElementUI树形控件报错问题解决

OHHINK博客

06-13

2301

问题描述博客地址 Github 在ElementUI 2.4.1版本中，使用Tree树形控件中的自定义控件时，运行npm run dev，产生报错信息 Syntax Error: Unexpected token (114:5) 112 | renderContent(h, { node, data, store }) { 113 | return ( > 114...

elementUI使用tree报错Cannot read property ‘setCheckedKeys‘ of undefined“

weixin_44888392的博客

05-10

1816

报错是因为dom还没有加载完，就已经赋值了，所以才会报错的解决方案： this.$nextTick(() => { this.$refs.tree.setCheckedKeys('要赋值的数组') }); 附：因为我的tree是写在弹窗中的，如果弹窗不出现的话，dom也是没有加载的状态，所以要把弹窗出现写在前面，解决方案写在后面，才是万全之策。 ...

谷粒商城之分布式基础（二）

生命不息，编程不止的博客

11-20

1271

谷粒商城之分布式基础（二）

2021年最新Web前端面试题精选大全及答案

m0_54861649的博客

03-07

2184

基于elementui封装的treeSelect 树形选择组件，以及自定义组件在form表单的校验问题

user-jianyong的博客

11-16

2048

基于elementui封装的treeSelect 树形选择组件，以及自定义组件在form表单的校验问题 treeSelect组件 <template> <div ref="container"> <el-popover :width="this.width || this.containerWidth" placement="bottom-start" title="" trigger="click" >

vue 的render函数中渲染element组件库的标签报错（已解决）

最新发布

sinat_41200024的博客

06-05

953

vue 的render函数中无法渲染element组件库的标签的解决办法

实现自定义elementui的tree树形控件

qq_35451130的博客

08-23

3360

因为一些业务的需要，在elementUI中的tree树形控件的icon和样式就显得捉襟见肘了，那么很多情况下。childNodes这个东西，其实自己看发现他是一个数组，也就是说，他是数据他的一个孩子节点，比如数。据是一个二级或者三级的，那么当你点击一级栏目的时候他的数据的children里面有几个对象那么他就是。判断，如果等于0的时候那么他的肯定是最后一级目录，如果不等于0说明还有嵌套。数组几个，使用场景比如说目录有些是课程目录，有些是一级下面直接三级，有些是一级里面有二级，来写不同的css样式，

Element-UI 树形控件，报错Syntax Error: Unexpected token (108:10)＜span＞标签报错（已解决）

风不知从何处起的小屋

04-09

800

官方文档地址这里给出具体的报错截图问题解决：这是因为树形控件需要jsx语法支持，需要安装vue中的jsx的插件transform-vue-jsx才支持jsx的写法安装相关依赖到生产环境中（-S / --save 将依赖添加到生产环境中） npm install babel-plugin-transform-vue-jsx -S npm install babel-helper-vue-jsx-merge-props -S npm install babel-plugin-syntax-jsx -

二期急救中没有实现的el-tree中的render树

Fatfish_tree的博客

03-01

144

* 树形控件render函数中el-slider的双向绑定没实现*@ @* *== "Max").Value + '分'), ]) ]), ] ), ]);

Vue+element中Tree树形控件数据失效~

weixin_33744854的博客

05-21

5554

1.完成效果 2.要求后台大哥说，数据量太大，没办法一次性把全部的数据给我，先给我第一级的数据，子项则在点击的时候进行请求； 3.开写~~~~~~ 初始数据（对象数组）：组件调用： <template> <el-tree :data="chulilist" :props="defaultProps" :render-content="renderContent"...

vue 的render函数中无法渲染element组件库的标签【已解决】

韩盼盼的小窝

07-13

2361

项目环境：vue3 vite js 没有使用ts 组件库：element-plus在render函数中使用element标签，能成功渲染到浏览器中，但并未解析，直接原样输出查到文档： https://www.5axxw.com/questions/content/t204d0 (未能解决) https://www.jb51.net/article/249932.htm(未能解决)完美解决：https://stackoverflow.com/questions/71452398/recommended

【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞使用vue-content-menu定制可编辑树结构editableTree

Sabrina_cc的博客

12-03

2万+

本文主要讲解了基础Element-ui中el-tree组件的使用，包括对组织机构树的组件封装，使用组织机构树进行查询，以及使用vue-content-menu修改editableTree

文字超出显示,render-content使用

Rziziの博客

10-19

931

render-content使用,文字超出省略

elementUI tree组件的自定义节点内容render-content

ZYX10077的博客

03-16

6213

elementUI tree组件的自定义节点内容render-content 产品给的需求需要向el-tree组件添加自定义数据，我们就可以看官网里面的一些方法有没有这样的功能。官网我们看到文档中有这样的功能。如何使用 html代码 <el-tree class="tree-font" :data="punishTreeData" ref="punishTree"

Vue与ElementUI：树形控件ElementUI Tree的使用及自定义图标

ElementUI Tree组件是用于构建树形结构的控件，常用于组织层次清晰的数据，如组织架构、文件目录等。在Vue项目中，我们可以借助ElementUI轻松实现树形结构的展示。 1. 数据渲染： - 使用`<el-tree>`标签，并将数据...