在项目中用到菜单项编辑删除,在 element-ui自定义节点内容时,

有说明:使用render-content指定渲染函数,

得环境支持 JSX 语法,只要正确地配置了相关依赖,就可以正常运行。

一,下面安装依赖:

cnpm install babel-plugin-transform-vue-jsx -S
cnpm install babel-helper-vue-jsx-merge-props -S
cnpm install babel-plugin-syntax-jsx -S

二,然后在.babelrc文件中配置插件即可

如环境不支持 JSX 语法,下面代码全报错

<el-tree
:data="data2"
:props="defaultProps"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent">
</el-tree> <script>
let id = ; export default {
data() {
return {
data2: [{
id: ,
label: '一级 1',
children: [{
id: ,
label: '二级 1-1',
children: [{
id: ,
label: '三级 1-1-1'
}, {
id: ,
label: '三级 1-1-2'
}]
}]
}, {
id: ,
label: '一级 2',
children: [{
id: ,
label: '二级 2-1'
}, {
id: ,
label: '二级 2-2'
}]
}, {
id: ,
label: '一级 3',
children: [{
id: ,
label: '二级 3-1'
}, {
id: ,
label: '二级 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
}, methods: {
append(store, data) {
store.append({ id: id++, label: 'testtest', children: [] }, data);
}, remove(store, data) {
store.remove(data);
}, renderContent(h, { node, data, store }) {
return (
<span>
<span>
<span>{node.label}</span>
</span>
<span style="float: right; margin-right: 20px">
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
</span>
</span>);
}
}
};
</script>

vue中element-ui树形控件自定义节点,注意一下的更多相关文章

  1. 基于vue开发的element-ui树形控件报错问题解决

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

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

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

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

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

  4. vue+element tree(树形控件)组件(1)

    最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力.各位前辈帮我解决问题,才勉强搞定.让我来记录这个树形组件的编写过程和期间用到的知识点. 首先说说需求,就是点击出现弹窗+蒙板,弹窗内容是一 ...

  5. vue+element tree(树形控件)组件(2)

    今天记录组件的代码和一个调用它的父组件的代码,接口接收数据直接传element直接能用的,也就是经过上一章函数处理过的数据以下是代码 父组件 <template> <commonfi ...

  6. 在 Vue中使用layui日历控件,标注重要日子

    因为在vue文件中通过import加载,不知道为什么打包后会找不到js, 所以通过这种方法引入 在index.html中引入 文件目录 需要放在static目录下 <input type=&qu ...

  7. vue递归组件 (树形控件 )

    首先我们要知道,既然是递归组件,那么一定要有一个结束的条件,否则就会使用组件循环引用,最终出现“max stack size exceeded”的错误,也就是栈溢出.那么,我们可以使用v-if=&qu ...

  8. element ui 日期控件范围时间限制记录、以及计算两个日期之间的天数

    日期的筛选经常会有最小的日期选择,例如:当前日期 :clearable="false" :picker-options="pickerOptions0" val ...

  9. VC中的树形控件

    树形控件可以显示出各项之间的层次关系,因此在VC中很常用. 1.树形控件的常用风格 TVS_HASBUTTONS 在父项目前显示+.-.用户可以通过点击该符号来打开或收起子项 TVS_HASLINES ...

随机推荐

  1. 【BZOJ5339】[TJOI2018]教科书般的亵渎(斯特林数)

    [BZOJ5339][TJOI2018]教科书般的亵渎(斯特林数) 题面 BZOJ 洛谷 题解 显然交亵渎的次数是\(m+1\). 那么这题的本质就是让你求\(\sum_{i=1}^n i^{m+1} ...

  2. 【map】p1184 高手之在一起

    题目背景 高手是可以复活的,这点我们大家都知道. 题目描述 高手列出了一个详尽的日程表,这次他要追求的则是一个心灵纯洁的小萝莉.他和她都是要上课的,但是也会有时间空闲,于是高手决定无时无刻都要跟着她. ...

  3. [WC2010]重建计划(分数规划+点分治+单调队列)

    题目大意:给定一棵树,求一条长度在L到R的一条路径,使得边权的平均值最大. 题解 树上路径最优化问题,不难想到点分治. 如果没有长度限制,我们可以套上01分数规划的模型,让所有边权减去mid,求一条路 ...

  4. JDK8中的并行流

    1.IntStream.parallel():获取并行流处理 2. Collection中调用parallelStream()获取并行流 3.并行排序Arrays.parallelSort()

  5. Nginx环境的搭建

    源码安装 不同发行版使用的安装程序都不同,所以官方提供了源代码,我们需要将原代码编译后再安装. 源程序使用C语言开发,所以需要安装C语言的编译环境. 安装Nginx环境和第三方支持库 yum inst ...

  6. JVM内存模型你只要看这一篇就够了

    JVM内存模型你只要看这一篇就够了 我是一只孤傲的鱼鹰 让我们不厌其烦的从内存模型开始说起:作为一般人需要了解到的,JVM的内存区域可以被分为:线程栈,堆,静态方法区(实际上还有更多功能的区域,并且这 ...

  7. 洛谷P4362 贪吃的九头龙

    大意就是把一棵树的点染成m种颜色,其中1号点的颜色必须染恰好k个节点. 总代价是所有两端点颜色相同的边的边权. 求最小代价. 解:可以分为m == 2和m > 2两个题. m > 2时有代 ...

  8. dispatchEvent(AWTEvent) 分派事件

    点一个按钮,显示的分派一个指定的事件给系统. 下面是一个例子,当点击close按钮时,分派一个new WindowEvent(this,WindowEvent.WINDOW_CLOSING)事件给系统 ...

  9. 跟我一起用node-express搭建一个小项目(node连接mongodb)[三]

    数据库虽然安装并启动成功了,但我们需要连接数据库后才能使用数据库. 怎么才能在 Node.js 中使用 MongoDB 呢? 我们使用官方提供的 node-mongodb-native 驱动模块,打开 ...

  10. PHP快速排序算法

    说明: 通过设置一个初始中间值,来将需要排序的数组分成3部分,小于中间值的左边,中间值,大于中间值的右边,继续递归用相同的方式来排序左边和右边,最后合并数组 示例: <?php $a = arr ...