element el-transfer穿梭框的使用，自定义穿梭框的数据项-Toy模板网

这篇具有很好参考价值的文章主要介绍了element el-transfer穿梭框的使用，自定义穿梭框的数据项。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

<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:自定义搜索文章来源地址https://www.toymoban.com/news/detail-628442.html

 <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
      }
    }
  }

到了这里，关于element el-transfer穿梭框的使用，自定义穿梭框的数据项的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！