vue-element-admin我踩的坑（9）

element-ui的transfer组件选项过长问题解决

使用element-ui的transfer组件不可避免出现选项过长问题：

我这里的解决方案是使用transfer的render-content自定义渲染函数，里面添加element-ui的tooltip组件，对超长的选项进行提示。

1. 绑定渲染函数

<el-transfer
    :render-content="itemTips"
.....
/>

2. 渲染函数定义：

itemTips(h, option) {
      if (option.label.length > 36) {
        return <el-tooltip placement='right'><div slot='content'>{option.label}</div><span>{option.label}</span></el-tooltip>
      } else {
        return <span>{option.label}</span>
      }
}

大功告成！

另外要注意的是，根据查到信息，这个函数需要用到babel-plugin-transform-vue-jsx插件，请先检查一些工程下面mode_modules目录下是否已经下载此插件