Element-UI 树形控件，报错Syntax Error: Unexpected token (108:10)＜span＞标签报错（已解决）

﹏ヽ暗。殇╰゛Y 2022-11-17 11:22 74阅读 0赞

[官方文档地址][Link 1]

这里给出具体的报错截图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYW5nMTAwMTEx_size_16_color_FFFFFF_t_70]  
问题解决：这是因为树形控件需要jsx语法支持，需要安装vue中的jsx的插件transform-vue-jsx才支持jsx的写法

1.  安装相关依赖到生产环境中（-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

1.  配置插件

"plugins": ["transform-runtime","transform-vue-jsx"],

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYW5nMTAwMTEx_size_16_color_FFFFFF_t_70 1]  
3. npm run dev 启动即可

### 展示部分前端代码，仅供参考 ###

//自定义结点按钮
         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>
              );
          },

![在这里插入图片描述][20210409120839730.png]

文章参考了博客园 https://www.cnblogs.com/zhoushuang0426/p/11059989.html  
[跳转][Link 2]

[Link 1]: https://element.eleme.cn/#/zh-CN/component/tree
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYW5nMTAwMTEx_size_16_color_FFFFFF_t_70]: /images/20221022/12c9540ccab642ca976a9a5d56454985.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYW5nMTAwMTEx_size_16_color_FFFFFF_t_70 1]: /images/20221022/5b8a050994f64c9b9864284e9fe04aba.png
[20210409120839730.png]: /images/20221022/9852fb8bb63e4f86a534afba31374af7.png
[Link 2]: https://www.cnblogs.com/zhoushuang0426/p/11059989.html