框架:vue+ElementUI

如图所示:在表格的最后一列操作处,当鼠标移上去时,要求提示语提示给用户

 此处使用到了Element框架的el-table 的一个属性如下:

Table-column Attributes 

代码如下: 

<el-table>
    <el-table-column  label="操作" :render-header="renderHeader" align="center">
         <template slot-scope="scope">
                   <el-button v-if="scope.row.operation==='add'" type="text" @click="handleAddClick('add',scope.$index)">新增</el-button>
                    <el-button v-else type="text" @click="handleAddClick('del',scope.$index)">删除</el-button>
         </template>
    </el-table-column>
</el-table>


<script>
export default({

    methods: {
        renderHeader() {
                return (
                    <div>
                        <span>操作</span>
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="一个品类分多个仓库入库可新增同品类"
                            placement="top-start"
                        >
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                    </div>
                );
            },
    }
})
<script>

当renderHeader()方法调用以后终端报错了!!!:Support for the experimental syntax ‘jsx‘ isn‘t currently enabled

解决方案:

根据图中红色框中的提示语:

大致意思就是需要你在.babelrc 配置文件中 添加@vue/babel-preset-jsx即可

步骤一:

Install the dependencies:

# for yarn: 

yarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

# for npm: 

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save

步骤二:

在.babelrc文件中添加@vue/babel-preset-jsx,如下代码:

presets: ['@vue/babel-preset-jsx'],

这里是我项目中的 .babelrc 文件的具体代码 

// .babelrc 文件
{
  "presets": [
    ["@babel/preset-env", { "modules": false }],
    "@vue/babel-preset-jsx" // 支持jsx语法
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties", // 支持classProperties语法
    "syntax-dynamic-import",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

}

步骤三:

保存后,重新启动项目即可


最后看下.babelrc文件的位置

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐