element el-transfer穿梭框的使用,自定义穿梭框的数据项

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


	{{ option.label }}
		{{ option.url}}


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

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

3:清空搜索条件

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

4:自定义搜索

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

你可能感兴趣的:(前端,javascript,vue.js)