elementplus上下穿梭框 elementui表格穿梭框

1.需求

要做这种带搜索的选择穿梭框

2.实现

在template中

<el-transfer
   :titles="['所有角色', '已选角色']"  // 两个穿梭框标题
   filterable // 可以搜索的属性
   :filter-method="filterMethod" // 搜索方法
   filter-placeholder="请输入用户"
   v-model="reseveValue" // 值
   :data="data">
</el-transfer>

在data中：

（官方文档的，有点问题）

element官方文档上是这样的，但是这有个不好的地方就是，他这个地方generateData 里面的数据是静态的，我要改成动态的又不好改，因为都在data里面，data里面又不能赋值给data里面。所以我进行优化了一下。

const generateData = _ => {
 const data = [];
 const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
 const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
 cities.forEach((city, index) => {
   data.push({
     label: city,
     key: index,
     pinyin: pinyin[index]
   });
 });
 return data;
};
data () {
	reseveValue: [],
	data: generateData(),
    filterMethod(query, item) {
      return item.pinyin.indexOf(query) > -1;
    }
}

（我自己优化了一下）

在data中

data () {
	data: [], // 让data先定义一个空数组，反正上面他return返回给我的也是一个数组，我自己写个方法，后面让那个数组赋值给data就好啦
    reseveValue: [],
    filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
    },
}

开始获取动态数据填进去啦。。
在methods中：

methods () {
	// 从后台获取想要的数据
  getRoles () {
            //
     this.axios.get('xxx/xxx/list', {}).then(res => {
         if (res.code === '0') {
         	this.generateData(this.resultUserList) // 当我获取到动态数据后，那么就要添加进穿梭框的data中，以便于显示数据
         } else {
             this.$message.error(res.message);
         }
     });
  },
  generateData (list) {
      const data = [];
      const cities = list;
      const pinyin = [];
      list.forEach(item => {
      	  // 文档中是根据拼音来搜索的，我想要汉字，那么我就把要显示的名字添加进去就好了
          pinyin.push(item.roleName)
      })
      cities.forEach((city, index) => {
          data.push({
              label: city.roleName,
              key: city.roleCode,
              pinyin: pinyin[index],
              item: city
          });
      });
      this.data = data;
  },
}

**

注意：这其中的key值一定要写你动态获取到的id或者code值，elementui官网有点坑，写的是index, 如果写index的话，那么就会有问题啊

**

**

会有什么问题，像这个需求，假如需要点击左边的菜单来发送请求获取【所有用户】框的信息，当我获取完以后，我把测试8号的江小白用户选中到了已选用户中，再当我店家测试小1111号的时候，这个下面的琴酒用户也自动选中了，很奇怪的是为什么琴酒也被选中了，在朋友的指导下，打了个debugger看了下，原来是这个key的原因，如果只有一条数据时，key就是0，当我选中后，reseveValue数组里面存的就是选中的key值，为[0],当我点击测试小111号时，测试小111号下面也只有一条数据琴酒，所以琴酒的key值也是0，被选中的数组里的key值为0，此时，琴酒就被选过去了，因为琴酒的key值也是0。所以这里的key值要是动态的数据里面每条数据的唯一值，一般id或者code就是唯一值吧

**

这样子就解决啦