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目录下是否已经下载此插件