vue2+element ui 使用el-transfer穿梭框，render-content自定义渲染内容以及filter-method自定义搜索方法进行多项内容的综合过滤

最新推荐文章于 2025-06-06 08:35:51 发布

原创

最新推荐文章于 2025-06-06 08:35:51 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #elementui

HTML使用代码

<el-transfer
      style="width: 100%; display: inline-block"
      v-model="value"
      filterable
      :filter-method="filterMethod"
      :filter-placeholder="'员工姓名/手机号/部门'"
      :titles="['未添加员工', '已选择员工']"
      :button-texts="['移除', '添加']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}',
      }"
      :data="peopleList"
      :render-content="renderFunc"
      :props="{
        key: 'id',
        label: 'name'
      }"
    ></el-transfer>

JavaScript 部分代码

<script>
export default {
  data() {
    return {
      filterMethod(query, item) {
        const searchString = `${item.name} ${item.phoneNumberT} ${item.idCode}`.toLowerCase();
        return searchString.includes(query