【vue系列】elementUI 穿梭框右側獲取當前選中項的值的思路

最近

作了一個需求 在查詢結果的表格中，選取（可多選）一些值，獲取到保單號後，打開一個elementUI的穿梭框，而後獲取到全部業務員，選取一些業務員後，將上一步獲取到的保單號傳遞給業務員。

畫個示意圖

 

 在這裏遇到問題了

問題是 我要獲取到右邊我選取的人的工號和姓名，可是根據elementUI的文檔提供的方法，渲染上去的信息都有一個惟一的key，在設置的時候 ↓

1  data.push({
2             key: i,
3             label: `備選項 ${ i }`,
4             disabled: i % 4 === 0
5           });

 

   @change是右側選項發生變化後觸發的，拿到的是key。並且還有個問題，若是有3條數據，可是用戶只勾選了2條或者1條，這個方法就拿不到用戶選擇的是哪一個值了。

後來查了之後用:render-content， 這個方法是將數據渲染到穿梭框上的，因此能夠拿到我要的信息，可是坑爹的是這個竟然會本身作一個循環，我想把它裝進數組裏，可是數組裏只能留存最後一個值。。。。很坑

後來實在是沒辦法了。。。感受人生絕望的時候。。。

通過高人點撥，我說右側只能拿到惟一key，有什麼辦法能獲取我當前選中項數據呢？高人只一句話——拿到源數據的時候，別忘了作數據字典。

一語驚醒夢中人啊！我也嘗試過和穿梭框取到的key和源數據進行匹配，可是源數據沒有任何雞毛能夠匹配的，看到數據字典幾個字就醒悟了：

因而我就在獲取到要渲染到穿梭框值的接口處，放了一個key，由於穿梭框渲染數據的順序和源數據的順序是同樣的，因此能夠進行這樣的操做。而後就經過key匹配，拿到我要的東西。

 1    axios.post(this.SeverAddress + '/auth/login', obj)
 2           .then((resp) => {
 3               _this.loading = false;
 4              if (resp.data.recode == '0') {
 5                //登陸成功
 6                localStorage.setItem('ms_username',resp.data.username);
 7                localStorage.setItem('crm_usercode',resp.data.usercode);
 8                localStorage.setItem('crm_identify',resp.data.identify);
 9                localStorage.setItem('crm_comcode',resp.data.comcode);
10 
11                // var ele = this.$options.methods.userinfo('crm_comcode'); //1109-當前登陸機構00000000沒數據 先寫死了
12                var ele = 13000006;
13                var arr = [];
14                var objs = {
15                  'comCode':ele
16                }
17                axios.post(this.SeverAddress + '/CifSaUserController/queryCifSaUser', objs)
18                  .then((eles) => {
19                $.each(eles.data,function (index,i){
20  arr.push({ 21  name:i.username, 22  codes:i.usercode, 23  key:index 24  }) 25                })
26                var newBee = JSON.stringify(arr)
27                localStorage.setItem('dataSend',newBee);
28              })
29              .catch((error) => {
30                  console.log('false')
31                });

對比：

test:function(a){
      var tmp = JSON.parse(localStorage.getItem('dataSend'));
      this.mem = a;
      var obj = {};
      var na = [];
      for(let i = 0;i<tmp.length;i++){
        for(let j = 0;j<a.length;j++){
          if(a[j] == tmp[i].key){
            obj = {
              "usercode":tmp[i].codes,
              "username":tmp[i].name
            }
            na.push(obj);
          }
        }
      };
      this.cifSauserList = na;
    },

 

這件事就是一個啓發，在遇到坎的時候，換個思路 恩