对没错,这次又是ElementUI的问题,在使用ElementUI中的 tree 树形控件时需要动态添加DOM元素,但是在使用文档中给出的案例的时候会报错。

案例:ElementUI树形控件 - 自定义节点内容

<el-tree
:data="data4"
:props="defaultProps"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent">
</el-tree> <script>
let id = 1000; export default {
data() {
return {
data4: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
}, methods: {
append(data) {
const newChild = { id: id++, label: 'testtest', children: [] };
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
}, remove(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
}, renderContent(h, { node, data, store }) {
return (
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
<span>
<span>{node.label}</span>
</span>
<span>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
</span>
</span>);
}
}
};
</script>

其中 renderContent 函数中返回的内容会报错,于是在网络上寻找答案,不然组件是不能使用的。

原来是缺少相应的依赖,因为 renderContent 方法用到了jsx语法,所以需要要引入babel的JSX解析器,把JSX转化成JS语法,这个工作会由babel自动完成。

解决办法:

step1:安装相应依赖。

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

step2:配置插件

在 .babelrc 文件中配置插件

基于vue开发的element-ui树形控件报错问题解决的更多相关文章

  1. 【NX二次开发】Block UI 选项卡控件

    [NX二次开发]Block UI 选项卡控件

  2. vue实现elment 可编辑树形控件

    功能实现程度: elment树形控件,已具备新增.删除功能,此项目,添加编辑功能,新增时可对节点命名,也可直接给已添加的节点修改名字 先看效果: 控件有所改动,如加输入框,输入关键字过滤,节点图标变换 ...

  3. element ui 时间控件 多个日期

    前言:工作中用到 vue+element ui 的前端框架,需要使用时间控件来选择多个日期,已月日的形式,且有默认值,所以记录一下.转载请注明出处:https://www.cnblogs.com/yu ...

  4. vue+element项目中使用el-dialog弹出Tree控件报错问题

    1. 按正常的点击按钮,显示dialog弹出的Tree控件,然后把该条数据下的已经选中的checkbox , 用setCheckedNodes或者setCheckedKeys方法选择上 , 报下面这个 ...

  5. element ui 中的 resetFields() 报错'resetFields' of undefined

    每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行 ...

  6. vue开发中,build时css打包报错

    vue在打包的时候css报错,首先声明的这个并没有解决webpack本身的问题,本来这个也是一个警示,不会影响代码正常运行 这个是因为我在多个页面引入了同一个css文件,webpack打包时候对css ...

  7. Sharepoint2013:日期控件报错

    1 问题 1> 在sharepoint中的,日期控件(DateTimeControl),日期过滤控件(Date Filter)和SPListViewFilter等包含日期组件的控件,在特定情况下 ...

  8. 解决vs验证控件报错” WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping。请添加一个名为 jquery (区分大小写)的 ScriptResourceMapping”问题

    将RequiredFieldValidator的 EnableClientScript属性设置成 False 适用于大多验证控件

  9. 类中调用界面ActiveX控件报错当前线程不在单线程单元中因此无法实例化 ActiveX 控件的解决办法

    解决办法是Form类中定义一个静态的ActiveX对象,在formload中将界面上的ActiveX对象赋值给新定义的对象,类中访问该静态对象即可. public static AxClientDri ...

随机推荐

  1. time 与 datetime 模块的常用方法

    时间格式 一个名词: UTC(Coordinated Universal Time):格林威治天文时,世界标准时间.中国为东八区 UTC+8 在编程的世界中,一定要了解的几种时间格式: 1.时间戳 从 ...

  2. 从ranknet到lamdarank,再到lamdamart

    learn2rank目前基本两个分支,1是神经网络学派ranknet,lamdarank,另一个是决策树学派如gbrank,lamdamart 05年提出ranknet,算分模块是简单的全连接网络,l ...

  3. [解决方法] Java-Class.forName() 反射/映射子类 并转化为父类/接口

    实现通过子类名称字符串 动态获取生成子类. 用于模板方法, 抽象工厂模式等. 代码实现: public TheParentClass getSubClass(String subClassName) ...

  4. 第一个Azure应用

    https://www.azure.cn/zh-cn/ 学习Azure,首先看的是官网Azure介绍,因为用到了虚拟机及存储等因此,着重看这两块. 本文Demo是通过API发送消息,当收到消息后新建虚 ...

  5. 杨力第一次jjave作业

    感觉jave学起来比c语言难一点,格式要求较高,有更多的东西要记,但是只要认真学应该不是很难,自己应该多写程序.

  6. popstate事件在低版本webkit中的调用

    popstate是H5的history系列中的事件,但是在低版本的webkit中会自动触发.H5中的history api是不会使页面发生跳转的,只是操作地址栏和响应的state属性而已,而且是手动操 ...

  7. js 调用后台,后台调用js

    <html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat=" ...

  8. 随机函数rand()与srand()

    一.int rand(void); 函数所在的头文件是stdlib.h: 其内部实现线性同除法,不是真正的随机数.通常rand()%x是指在x范围内取模,返回值0-x; 系统默认随机种子是1: 二.v ...

  9. 最短路径HDU3790(Dijkstra)

    准备考研,荒废了好多东西,希望做了正确的决定 /********************************************************* *author:chen xin * ...

  10. [Oracle][RMAN] Use RMAN to Migrate database from CentOS_5-11201-SingleDB to OracleLinux_5-11204-SingleDB

    リンク:How to Move/Restore DB to New Host and File System using RMAN (Doc ID 1338193.1)https://docs.ora ...