问题遇到的现象和发生背景
使用element-ui的 el-transfer 时,自定义了超长文本内容显示:render-content="renderFunc",随后想用 slot-scope 实现备选下拉的自定义和高亮。
发现使用了:render-content,便无法显示slot-scope 内的内容
用代码块功能插入代码,请勿粘贴截图
- <el-transfer
- filterable
- :filter-method="filterMethodTransfer"
- :props="{
- key:'id',
- label:'systemName'
- }"
- :data="data"
- v-model="handleList"
- :button-texts="['退回', '选择']"
- :titles="['未分配区', '选中区']"
- :render-content="renderFunc"
- >
- <span slot-scope="{ option }">{{ option.id }} - {{ option.systemName }}</span>
- </el-transfer>
-
- //超长文本显示
- renderFunc(h, option) {
- return <span title={option.systemName}>{option.systemName}</span>;
- },
运行结果及报错内容
无报错,只显示renderFunc的内容
我的解答思路和尝试过的方法
1、尝试将span标签更换为其他,也不行。
2、去除:render-content="renderFunc" 便可以显示 slot-scope的内容
我想要达到的结果
两者可以兼容