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

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

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

一,下面安装依赖:

  1. cnpm install babel-plugin-transform-vue-jsx -S
  2. cnpm install babel-helper-vue-jsx-merge-props -S
  3. cnpm install babel-plugin-syntax-jsx -S

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

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

  1. <el-tree
  2. :data="data2"
  3. :props="defaultProps"
  4. show-checkbox
  5. node-key="id"
  6. default-expand-all
  7. :expand-on-click-node="false"
  8. :render-content="renderContent">
  9. </el-tree>
  10.  
  11. <script>
  12. let id = ;
  13.  
  14. export default {
  15. data() {
  16. return {
  17. data2: [{
  18. id: ,
  19. label: '一级 1',
  20. children: [{
  21. id: ,
  22. label: '二级 1-1',
  23. children: [{
  24. id: ,
  25. label: '三级 1-1-1'
  26. }, {
  27. id: ,
  28. label: '三级 1-1-2'
  29. }]
  30. }]
  31. }, {
  32. id: ,
  33. label: '一级 2',
  34. children: [{
  35. id: ,
  36. label: '二级 2-1'
  37. }, {
  38. id: ,
  39. label: '二级 2-2'
  40. }]
  41. }, {
  42. id: ,
  43. label: '一级 3',
  44. children: [{
  45. id: ,
  46. label: '二级 3-1'
  47. }, {
  48. id: ,
  49. label: '二级 3-2'
  50. }]
  51. }],
  52. defaultProps: {
  53. children: 'children',
  54. label: 'label'
  55. }
  56. }
  57. },
  58.  
  59. methods: {
  60. append(store, data) {
  61. store.append({ id: id++, label: 'testtest', children: [] }, data);
  62. },
  63.  
  64. remove(store, data) {
  65. store.remove(data);
  66. },
  67.  
  68. renderContent(h, { node, data, store }) {
  69. return (
  70. <span>
  71. <span>
  72. <span>{node.label}</span>
  73. </span>
  74. <span style="float: right; margin-right: 20px">
  75. <el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
  76. <el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
  77. </span>
  78. </span>);
  79. }
  80. }
  81. };
  82. </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. Dynamic CRM 2015学习笔记(3)oData 查询方法及GUID值比较

    本文将比较二种查询字符串在同一个oData查询方法中的不同,另外,还将介绍如何比较不同方法返回的GUID的值. 用同一个oData查询方法,如果传入查询的字符串不一样,返回结果的格式竟然完全不一样. ...

  2. 学习1__STM32--FatFS之逻辑盘符与物理盘符

    FatFS源代码中的函数逻辑关系 第一 调用函数 f_mount() result = f_mount(&fs, FS_VOLUME_NAND, ); /* Mount a logical d ...

  3. 洛谷P2824 排序

    解:splay + 线段树合并,分裂. 首先有个乱搞做法是外层拿splay维护,有序区间缩成splay上一个节点.内层再开个数据结构支持合并分裂有序集合. 内层我一开始想的是splay,然后就没有复杂 ...

  4. 数据库和Django model 生成和反向生成

    Django 脚本生成数据表 建立映射关系 如果询问时区时间,选1 然后输入timezone.now() python manage.py makemigrations (如果有子应用的话子应用名称填 ...

  5. 第四篇-以ConstraintLayout进行Android界面设计

    此文章基于第三篇. 一.新建一个layout.xml文件,创建方法不再赘述,在Design界面右击LinearLayout,点击Convert LinearLayout to ConstraintLa ...

  6. 第二篇:用Android Studio编写Hello World

    将Android Studio的环境搭建好后,第一个写Hello World测试程序.Android Studio v3.2.1. 一.新建工程 点击Start a new Android Studi ...

  7. WebService 及 CXF 的进阶讲解

    4.2. WebService请求深入分析 1). 分析WebService的WSDL文档结构 1.1). 实例截图 <definitions> <types> <sch ...

  8. WebService的讲解 和 CXF 的初步使用

    1. 复习准备 1.1. Schema约束 几个重要知识: namespace 相当于schema文件的id targetNamespace属性 用来指定schema文件的namespace的值 xm ...

  9. C connect实现Timeout效果(Windows)

    int SocketClient::connectTimeOutForWin(SOCKET &connect_fd, const int &timeout, const sockadd ...

  10. JVM调优工具

    JMap 首先要知道Java进程的pid. Windows: .. .. .. Linux: ps -ef | grep java 查看堆栈信息(jmap -heap pid) jmap -heap ...