问题描述:

使用Tree树形控件使用render-content渲染时return后报错或npm run dev时候报错,报错信息相同,如下:

问题分析:

renderContent函数中需要使用jsx语法,需要安装vue中的jsx的插件transform-vue-jsx才支持jsx的写法

解决方法:

1:安装相关依赖:

npm install babel-plugin-transform-vue-jsx
npm install babel-helper-vue-jsx-merge-props
npm install babel-plugin-syntax-jsx

2:配置插件:

在根目录下找到.babelrc文件,加入配置:

{
"plugins": ["transform-vue-jsx"]
}

如下图所示: 

3:再次运行npm run dev即可

ElementUI Tree树形控件renderContent return时报错的更多相关文章

  1. elementUI Tree 树形控件--官方文档

    一.基础用法基础的树形结构展示,props相当于一个对实体类对像 <template> <el-tree :data="data" :props="de ...

  2. vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解

    做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...

  3. vue_elementUI_ tree树形控件 获取选中的父节点ID

    el-tree 的 this.$refs.tree.getCheckedKeys() 只可以获取选中的id 无法获取选中的父节点ID想要获取选中父节点的id;需要如下操作1. 找到工程下的node_m ...

  4. Element ui tree树形控件获取当前节点id和父节点id

    低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...

  5. BootstrapBlazor实战 Tree树形控件使用(2)

    继续上篇实战BootstrapBlazor树型控件Tree内容, 本篇主要讲解整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,My ...

  6. BootstrapBlazor实战-Tree树形控件使用(1)

    实战BootstrapBlazor树型控件Tree的使用, 以及整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,MySql/Sql ...

  7. vue-element Tree树形控件通过id默认选中

    一.设置 1.给树形控件设置 ref="tree" node-key="id" 2.在获取数据的位置加上 this.$nextTick(() => { t ...

  8. Element ui 使用 Tree 树形控件

    使用树形控件需要映入 jsx才能运行链接:https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage npm install\ babe ...

  9. easyui Tree树形控件的异步加载

    Tree控件 $('#partyOrgTree').tree({ checkbox: false, url: getDataUrl, onClick: function (node) { getDiv ...

随机推荐

  1. nginx缓冲区参数配置优化

    目录 一:nginx缓冲区优化 1.proxy_buffering 2.proxy_buffer_size 3.proxy_buffers 4.proxy_busy_buffers_size 5.pr ...

  2. Java多线程专题4: 锁的实现基础 AQS

    合集目录 Java多线程专题4: 锁的实现基础 AQS 对 AQS(AbstractQueuedSynchronizer)的理解 Provides a framework for implementi ...

  3. CSS之创意hover效果

    一.发送效果 HTML <div id="send-btn"> <button> // 这里是一个svg的占位 Send </button> & ...

  4. ideal 创建maven 项目

    一 准备工作,已经配置好了maven 环境 .没有的话,参考我的上一篇笔记. 二,ideal相关配置 打开ideal  找到设置. file  ------->setting  .     点击 ...

  5. Python PyQt5 | Hi音乐 v3.0.0 正式版发布

    Hi音乐 两大平台全音乐搜索.收听与下载的简洁网络音乐播放器 中文介绍 | English Description 源码:Gitee 码云 简介 Hi音乐 是基于 Python 开发的简洁网络音乐播放 ...

  6. PyTorch 介绍 | AUTOMATIC DIFFERENTIATION WITH TORCH.AUTOGRAD

    训练神经网络时,最常用的算法就是反向传播.在该算法中,参数(模型权重)会根据损失函数关于对应参数的梯度进行调整. 为了计算这些梯度,PyTorch内置了名为 torch.autograd 的微分引擎. ...

  7. vivo 评论中台的流量及数据隔离实践

    一.背景 vivo评论中台通过提供评论发表.点赞.举报.自定义评论排序等通用能力,帮助前台业务快速搭建评论功能并提供评论运营能力,避免了前台业务的重复建设和数据孤岛问题.目前已有vivo短视频.viv ...

  8. file类和fileinfo类的简单对比

    File类:提供用于操作文件的静态方法. FileInfo类:提供操作文件的属性和实例方法. Directory类:提供用于操作目录的静态方法. DirectoryInfo类:提供用于操作目录的实例方 ...

  9. 如何为Windows服务增加Log4net和EventLog的日志功能。

    一.简介 最近在做一个项目的时候,需要该项目自动启动.自动运行,不需要认为干预.不用说,大家都知道用什么技术,那就是 Windows服务.在以前的Net Framework 平台下,Windows 服 ...

  10. VMware网络连接模式(桥接、NAT以及仅主机模式的详细介绍和区别)

    VMware 桥接模式 VMware桥接模式,也就是将虚拟机的虚拟网络适配器与主机的物理网络适配器进行交接,虚拟机中的虚拟网络适配器可通过主机中的物理网络适配器直接访问到外部网络(例如图中所示的局域网 ...