这里给出具体的报错截图
问题解决:这是因为树形控件需要jsx语法支持,需要安装vue中的jsx的插件transform-vue-jsx才支持jsx的写法
- 安装相关依赖到生产环境中(-S / --save 将依赖添加到生产环境中)
npm install babel-plugin-transform-vue-jsx -S
npm install babel-helper-vue-jsx-merge-props -S
npm install babel-plugin-syntax-jsx -S
- 配置插件
"plugins": ["transform-runtime","transform-vue-jsx"],
3. npm run dev 启动即可
展示部分前端代码,仅供参考
<template>
<div class="orgStruTree" style="background-color: #ffffff">
<el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
<el-tree
:data="treeData"
ref="tree"
:key="tree_key"
node-key="orgId"
class="margin-top10"
@node-click="nodeClick"
:filter-node-method="filterNode"
:default-expanded-keys="defaultExpand"
default-expand-all
:render-content="renderContent"
></el-tree>
</div>
</template>
//自定义结点按钮
renderContent(h, { node, data, store }) {
return (
<span class="custom-tree-node">
<span>{node.label}</span>
<span>
<el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
</span>
</span>
);
},
文章参考了博客园 https://www.cnblogs.com/zhoushuang0426/p/11059989.html
跳转