1：查看element官方文档可以了解到 el-transfer穿梭框的基本使用方法，本文主要介绍数据项的自定义渲染和右侧列表元素变化时触发方法的实现。
自定义数据项，除了基本的el-transfer使用方法，还需要使用Scoped Slot。

实现效果

<el-transfer v-model="checked" :data="transferData" @change="getObject">
	<span slot-scope="{ option }">{{ option.label }}
		<span style="float: right; color: #8492a6; font-size: 13px; padding-left: 10px;padding-right: 15px;">{{ option.url}}</span>
</el-transfer>

2： :render-content=“renderFunc” 既可以文字过长以点点代表，还可以实现多个自定义内容

 <el-transfer
     ref="roleTransfer"
      v-model="roleData"
      style="padding-bottom: 20px"
      filterable
      :data="data"
      :titles="['未绑定API', '已绑定API']"
      :button-texts="[ '解绑','绑定']"
      :render-content="renderFunc"
      @change="transferChange($event)"
    />

// title:代表的就是希望文字过长的时候点点代替
 methods: {
    renderFunc(h, option) {
      console.log(option)
      return <span title={option.url}>{option.label} —— {option.url}</span>
    },
    }

3：清空搜索条件

  const tr = this.$refs.roleTransfer.$children
      if (tr) {
        // 左侧搜索框 0
        tr[0].query = ''
        // 右侧搜索框 3
        tr[3].query = ''
      }

4:自定义搜索

 <el-transfer
      ref="roleTransfer"
      v-model="roleData"
      style="padding-bottom: 20px"
      filterable
      :filter-method="filterMethod"
      filter-placeholder="请输入名称或url搜索"
      :data="data"
      :titles="['未绑定API', '已绑定API']"
      :button-texts="[ '解绑','绑定']"
      :render-content="renderFunc"
      @change="transferChange($event)"
    />

methods: {
 filterMethod(query, item) {
      const reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g') //判断是否是中文如果是中文就搜索名称要么就是url
      if (reg.test(query)) {
        return item.label.indexOf(query) > -1
      } else {
        return item.url.indexOf(query) > -1
      }
    }
  }