ivew 穿梭框Transfer组件高亮显示操作值

Posted 2021-10-05 ￡漫步 云端彡

项目场景：

Transfer（穿梭框），双栏穿梭选择框，常用于将多个项目从一边移动到另一边。这个组件在多个数据之间选择时非常方便。所有的控制都由组件完成，只需要最后保存组件目标值即可。

---

问题描述：

由于所有方式都由组件完成，因此会出现一种情况，当操作元素左右穿梭时，这些穿梭值与原数据样式一样，数据过多时，无法区分。而且组件没有任何一种方法直接可以特殊高亮显示。如下图所示（数据虽打马赛克，但可清晰看到数据颜色是相同的）：

---

原因分析：

我在百度上找了好久都没有找到解决方案，最后查看官网说明和源码研究，哈哈，其实也没看懂多少，大概知道组件并没有提供一种方式去处理这个问题。但是从官网可以看到render-format原生属性，查看元素之后，这个函数最后将返回值包含在span标签内部充当元素处理，发现使用html元素标签也是可以识别的哦。因此可以用这个方式去解决问题

---

解决方案：

首先需要在vue data中定义几个数据

 // 穿梭框左右移动操作值，
 optionItems: [],
 // 穿梭框右边值，后台获取
 selectClientUserIds: [],
 // 穿梭框左边值，后台获取
 clientUsers: [],
 // 初始化时选中值，赋值之后不再改变
 initSelectItems: [],

页面代码

 <Transfer ref="refTransfer" :titles="['客户端用户','授权用户']" :data="clientUsers" :target-keys="selectClientUserIds"
   filterable :filter-method="filterClientUser" @on-change="clientUsersChange" :render-format="renderFormat"
   :list-style="listStyle">
 </Transfer>

部分js处理函数

 // 打开弹出框，获取数据
 openclientUserManageModal(id) {
   this.clientUserManageId = id;
   this.clientUsers = [];
   this.selectClientUserIds = [];
   // 清空穿梭框搜索条件
   this.$refs.refTransfer.$children[0].query = '';
   this.$refs.refTransfer.$children[2].query = '';
   // 清空穿梭框复选框
   this.$refs.refTransfer.$children[0].toggleSelectAll();
   this.$refs.refTransfer.$children[2].toggleSelectAll();
   // 清空选中项
   this.optionItems = [];
   //获取选中用户ID
   getGrantClientUserIds({
     id: id
   }).then((result) => {
     if (result.status === 1) {
     	// 获取选中值,即穿梭框右边的值
       this.selectClientUserIds = result.data;
       // initSelectItems 默认初始化选中值
       this.initSelectItems = JSON.parse(JSON.stringify(result.data))
     } else {
       this.$Message.error(result.msg ? result.msg : "获取数据失败")
     }
   })
   //获取所有客户端用户列表
   getAllClientUsers().then((result) => {
     if (result.status == 1) {
     	// 初始化穿梭框左边的值
       this.clientUsers = result.data;
     } else {
       this.$Message.error(result.msg ? result.msg : "获取数据失败")
     }
   })
   this.$nextTick(() => {
     this.clientUserManageVisible = true;
     console.log(this.$refs.refTransfer)
   })
 },

filterClientUser(data, query) {
   return data.username.toLowerCase().indexOf(query.toLowerCase()) > -1 ||
     data.compName.toLowerCase().indexOf(query.toLowerCase()) > -1;
},
/**
 * 重点处理函数，在穿梭框左右移动的时候，将移动过的数据key值保存在optionItems中，
 * @param {Object} targetKeys 目标的key集合
 * @param {Object} direction 移动方向
 * @param {Object} moveKeys 移动的key数据
 */
clientUsersChange(targetKeys, direction, moveKeys) {
  this.selectClientUserIds = targetKeys;
  // 默认选中方在右侧，即目标方
  for (let moveKey of moveKeys) {
    if (this.initSelectItems.indexOf(moveKey) > -1) { //如果是默认选中值
      if (direction === 'left') { //左移时添加
        this.optionItems.push(moveKey)
      } else if (direction === 'right') { // 右移时移除
        let index = this.optionItems.indexOf(moveKey);
        if (index > -1) {
          this.optionItems.splice(index, 1);
        }
      }
    } else {
      // 不是默认选中值
      if (direction === 'left') { // 左移时移除
        let index = this.optionItems.indexOf(moveKey);
        if (index > -1) {
          this.optionItems.splice(index, 1);
        }
      } else if (direction === 'right') { // 右移时添加
        this.optionItems.push(moveKey)
      }
    }
  }
},
/**
 * 数据格式处理
 * 穿梭框数据格式
 * @param {Object} data
 */
renderFormat(data) {
  // 如果包含在操作项，显示为蓝色，否则默认
  if (this.optionItems.indexOf(data.key) != -1) {
    return '<label style="color: #2D8CF0;">' + data.username + '&nbsp;&nbsp;|&nbsp;&nbsp;' + data.compName +
      '</label>';
  } else {
    return '<label>' + data.username + '&nbsp;&nbsp;|&nbsp;&nbsp;' + data.compName + '</label>';
  }
},

效果如下，可以看到操作后的数据颜色不同：