vue中element-ui树形控件自定义节点,注意一下
2017-11-28 20:35
1226 查看
在项目中用到菜单项编辑删除,在 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 = 1000; export default { data() { return { data2: [{ 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(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 elementUI tree树形控件获取父节点ID的实例
- Jstree树形控件实现树形结构展示+自定义节点图标
- vue.js与element-ui实现菜单树形结构的解决方法
- 使用Vue与ElementUI开发时,关于时间控件的问题
- 【vue 组件 mint-ui】 看了一下源码,给轮播图Swiper封装自定义跳转的函数
- element-ui+vuex共享自定义方法进行表单验证 validator
- vue+elementUI中使用 el-autocomplete 实现远程搜索的下拉框需要注意的问题
- vue2.0基于vue-cli,element-ui饿了么vue前端开源项目制作vue的树形table,treeTable
- vue.js element-ui tree树形控件改iview的方法
- vue+elementUi时间控件
- 关于 Vue.js+Element-UI 日期控件 日期范围选择
- vue.js + element UI的一个注意点
- Element-ui树形控件el-tree使用过程中遇到的问题
- Android UI-自定义日历控件
- .NET树形控件展开一个节点则关闭同级节点
- Android UI高级控件之自定义Adapter(继承BaseAdapter)
- 自定义ConfigurationSection,创建多个嵌套的ConfigurationElementCollection节点
- VUE Element UI 60秒倒计时
- vue-cli完整地引入element-ui