使用element-ui的 el-transfer中:render-content和slot-scope冲突

问题遇到的现象和发生背景

使用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的内容

我想要达到的结果

两者可以兼容