在项目中用到菜单项编辑删除,在 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. rt-thread 学习路线

    @2019-01-25 [小记] > BSP制作与使用 将板载资源.芯片外设全部制作BSP,做到使用时只需在 menuconfig 中配置即用

  2. 压缩JS,CSS的工具

    目标: 压缩项目中的JS,CSS文件. 方法一:使用uglifyjs uglifycss 压缩JS: 1.安装NODEJS.是一个在服务端运行的JS语言.下载地址https://nodejs.org/ ...

  3. 「九省联考 2018」IIIDX 解题报告

    「九省联考 2018」IIIDX 这什么鬼题,送的55分要拿稳,实测有60? 考虑把数值从大到小摆好,每个位置\(i\)维护一个\(f_i\),表示\(i\)左边比它大的(包括自己)还有几个数可以选 ...

  4. bzoj1831 逆序对 (dp+树状数组)

    注意到,所有的-1应该是一个不降的序列,否则不会更优那就先求出来不是-1的的逆序对个数,然后设f[i][j]表示第i个-1放成j的前i个-1带来的最小逆序对数量这个可以树状数组来求 #include& ...

  5. Python3 与 C# 基础语法对比(String专栏)

      Code:https://github.com/lotapp/BaseCode 多图旧排版:https://www.cnblogs.com/dunitian/p/9119986.html 在线编程 ...

  6. Class实例在堆中还是方法区中?

    1.JVM中OOP-KLASS模型 在JVM中,使用了OOP-KLASS模型来表示java对象,即:1.jvm在加载class时,创建instanceKlass,表示其元数据,包括常量池.字段.方法等 ...

  7. CSS修改滚动条样式

    <div class="qq_bottom">超出部分变滚动条</div> /*//滚动条整体部分*/ .qq_bottom::-webkit-scroll ...

  8. 洛谷P1880 石子合并

    经典水题....... 断环为链长度乘二,求前缀和区间DP. #include <cstdio> #include <cstring> #include <algorit ...

  9. 一文看懂npm、yarn、pnpm之间的区别

    文作者对比了当前主流的包管理工具npm.yarn.pnpm之间的区别,并提出了合适的使用建议,以下为译文: NPM npm是Node.js能够如此成功的主要原因之一.npm团队做了很多的工作,以确保n ...

  10. Echarts关于仪表盘

    https://blog.csdn.net/zc763375777/article/details/53837391 来无事,制作不一样的图标一发,领导让把仪表盘做成百分条,我TM也是醉了,大体样式如 ...