ElementUI树形控件报错问题解决

问题描述

博客地址

Github

在ElementUI 2.4.1版本中，使用Tree树形控件中的自定义控件时，运行npm run dev，产生报错信息

Syntax Error: Unexpected token (114:5)

  112 | renderContent(h, { node, data, store }) {
  113 | return (
> 114 |     <span class="custom-tree-node">
      |     ^
  115 |         <span>{node.label}</span>
  116 |     <span>
  117 |     <el-button size="mini" 
                type="text" on-click={ () => 
                this.append(data) }>Append
                </el-button>

 @ ./resources/assets/js/components/Menu.vue 8:21-360
 @ ./resources/assets/js/routesadmin.js
 @ ./resources/assets/js/admin.js
 @ multi ./resources/assets/js/admin.js

解决方法

1.安装相应依赖

npm install babel-plugin-transform-vue-jsx
npm install babel-helper-vue-jsx-merge-props
npm install babel-plugin-syntax-jsx

2.配置插件

在根目录下创建.babelrc文件
加入下面的内容
{
    "plugins": ["transform-vue-jsx"]
}

再运行npm run dev就可以正常使用了