vue中element-ui树形控件自定义节点,注意一下
在项目中用到菜单项编辑删除,在 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树形控件自定义节点,注意一下的更多相关文章
- 基于vue开发的element-ui树形控件报错问题解决
对没错,这次又是ElementUI的问题,在使用ElementUI中的 tree 树形控件时需要动态添加DOM元素,但是在使用文档中给出的案例的时候会报错. 案例:ElementUI树形控件 - 自定 ...
- vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
- element ui 时间控件 多个日期
前言:工作中用到 vue+element ui 的前端框架,需要使用时间控件来选择多个日期,已月日的形式,且有默认值,所以记录一下.转载请注明出处:https://www.cnblogs.com/yu ...
- vue+element tree(树形控件)组件(1)
最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力.各位前辈帮我解决问题,才勉强搞定.让我来记录这个树形组件的编写过程和期间用到的知识点. 首先说说需求,就是点击出现弹窗+蒙板,弹窗内容是一 ...
- vue+element tree(树形控件)组件(2)
今天记录组件的代码和一个调用它的父组件的代码,接口接收数据直接传element直接能用的,也就是经过上一章函数处理过的数据以下是代码 父组件 <template> <commonfi ...
- 在 Vue中使用layui日历控件,标注重要日子
因为在vue文件中通过import加载,不知道为什么打包后会找不到js, 所以通过这种方法引入 在index.html中引入 文件目录 需要放在static目录下 <input type=&qu ...
- vue递归组件 (树形控件 )
首先我们要知道,既然是递归组件,那么一定要有一个结束的条件,否则就会使用组件循环引用,最终出现“max stack size exceeded”的错误,也就是栈溢出.那么,我们可以使用v-if=&qu ...
- element ui 日期控件范围时间限制记录、以及计算两个日期之间的天数
日期的筛选经常会有最小的日期选择,例如:当前日期 :clearable="false" :picker-options="pickerOptions0" val ...
- VC中的树形控件
树形控件可以显示出各项之间的层次关系,因此在VC中很常用. 1.树形控件的常用风格 TVS_HASBUTTONS 在父项目前显示+.-.用户可以通过点击该符号来打开或收起子项 TVS_HASLINES ...
随机推荐
- rt-thread 学习路线
@2019-01-25 [小记] > BSP制作与使用 将板载资源.芯片外设全部制作BSP,做到使用时只需在 menuconfig 中配置即用
- 压缩JS,CSS的工具
目标: 压缩项目中的JS,CSS文件. 方法一:使用uglifyjs uglifycss 压缩JS: 1.安装NODEJS.是一个在服务端运行的JS语言.下载地址https://nodejs.org/ ...
- 「九省联考 2018」IIIDX 解题报告
「九省联考 2018」IIIDX 这什么鬼题,送的55分要拿稳,实测有60? 考虑把数值从大到小摆好,每个位置\(i\)维护一个\(f_i\),表示\(i\)左边比它大的(包括自己)还有几个数可以选 ...
- bzoj1831 逆序对 (dp+树状数组)
注意到,所有的-1应该是一个不降的序列,否则不会更优那就先求出来不是-1的的逆序对个数,然后设f[i][j]表示第i个-1放成j的前i个-1带来的最小逆序对数量这个可以树状数组来求 #include& ...
- Python3 与 C# 基础语法对比(String专栏)
Code:https://github.com/lotapp/BaseCode 多图旧排版:https://www.cnblogs.com/dunitian/p/9119986.html 在线编程 ...
- Class实例在堆中还是方法区中?
1.JVM中OOP-KLASS模型 在JVM中,使用了OOP-KLASS模型来表示java对象,即:1.jvm在加载class时,创建instanceKlass,表示其元数据,包括常量池.字段.方法等 ...
- CSS修改滚动条样式
<div class="qq_bottom">超出部分变滚动条</div> /*//滚动条整体部分*/ .qq_bottom::-webkit-scroll ...
- 洛谷P1880 石子合并
经典水题....... 断环为链长度乘二,求前缀和区间DP. #include <cstdio> #include <cstring> #include <algorit ...
- 一文看懂npm、yarn、pnpm之间的区别
文作者对比了当前主流的包管理工具npm.yarn.pnpm之间的区别,并提出了合适的使用建议,以下为译文: NPM npm是Node.js能够如此成功的主要原因之一.npm团队做了很多的工作,以确保n ...
- Echarts关于仪表盘
https://blog.csdn.net/zc763375777/article/details/53837391 来无事,制作不一样的图标一发,领导让把仪表盘做成百分条,我TM也是醉了,大体样式如 ...