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

官方文档地址

这里给出具体的报错截图

问题解决：这是因为树形控件需要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

2. 配置插件

"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
跳转