另类穿梭框[只针对具体项目]

需求： 要求左边的内容移动到右边，但是左边的内容不能减少，而且要对数据进行去重处理。

<template>
  <div class="transfer-list">
    <div class="transfer-header">
      <span class="transfer-header-title">{{title}}</span>
      <span class="transfer-header-count">{{checkedLength}}/{{data.length}}</span>
    </div>

    <div class="transfer-list-body">
      <ul class="transfer-list-content">
        <li v-for="(item,index) in data" class="transfer-list-content-item" :key="index">
          <input type="checkbox" v-model="item.checked" />
          <span>{{item.title}}</span>
          <span v-if="item.consumeSpecification">({{item.consumeSpecification}})</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ["title", "data"],
  data() {
    return {
      // data: {
      //   ...data
      // },
      checked: true,
      checkedAll: false,
      hospitalId: null
    };
  },
  computed: {
    //计算选中的个数
    checkedLength() {
      return this.data.filter(item => item.checked).length;
    }
  },
  methods: {}
};
</script>
<!--https://www.jb51.net/article/160998.htm-->
<style lang="scss" scoped>
.transfer {
  width: 800px;
  margin: 100px auto;
  position: relative;
  line-height: 1.5;
}

.transfer-list {
  width: 300px;
  height: 500px;
  font-size: 12px;
  vertical-align: middle;
  position: relative;
  padding-top: 35px;
  display: inline-block;
}

.transfer-header {
  box-sizing: border-box;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px 6px 0 0;
  overflow: auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.transfer-header-title {
  padding-left: 4px;
  font-size: 20px;
  font-weight: 700;
}

.transfer-header-count {
  float: right;
  margin-right: 4px;
  font-size: 20px;
}

.transfer-list-body {
  height: 100%;
  border: 1px solid #dddee1;
  border-top: none;
  border-radius: 0 0 6px 6px;
  position: relative;
  overflow: hidden;
}

.transfer-list-content {
  height: 100%;
  padding: 4px 0;
  overflow-x: scroll;
  overflow-y: scroll;
}

.transfer-list-content-item {
  margin: 0;
  line-height: normal;
  padding: 6px 16px;
  clear: both;
  color: #495060;
  font-size: 16px;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}

.transfer-operation {
  display: inline-block;
  overflow: auto;
  margin: 0 16px;
  vertical-align: middle;
}
</style>

引入穿梭框

import TransferList from "./TransferList";

components：{

TransferList

}

computed: {
  //计算选中的个数
  checkedLength() {
    return this.data.filter(item => item.checked).length;
  }
},

<transfer-list v-bind:data="originData" title="关联产品"></transfer-list>

data(){

originData: [], //源数据列表
targetData: [], // 目标列表

}

//定义共用函数
oToT(obj1, obj2) {
  let isIdsList = [];
  obj2.forEach(item => {
    isIdsList.push(item.id);
  });
  let targetChecked = obj1
    .filter(item => item.checked)
    .map(item => {
      return {
        ...item,
        checked: false
      };
    });
  let targetChecked2 = [];
  targetChecked.forEach(item => {
    if (!isIdsList.includes(item.id)) {
      targetChecked2.push(item);
    }
  });
  obj2.push(...targetChecked2);
  obj1.forEach(e => {
    if (e.checked == true) {
      e.checked = false;
    }
  });
},
//定义共用函数
TToO(obj1) {
  let targetChecked = obj1.filter(item => item.checked == false);
  this.targetData = targetChecked;
},
// 目标文件
targetToOrigin() {
  this.TToO(this.targetData);
},
//源到目标
originToTarget() {
  this.oToT(this.originData, this.targetData);
},



//获取源数据

this.originData = result.page.rows.map(item => {
  return {
//需要传给组件的内容
    id: item.hospitalid,
    title: item.hospitalname,
    checked: false
  };
});