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

最近

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

畫個示意圖

 

 在這里遇到問題了

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

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

 

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

后來查了以后用:render-content， 這個方法是將數據渲染到穿梭框上的，所以可以拿到我要的信息，但是坑爹的是這個居然會自己做一個循環，我想把它裝進數組里，但是數組里只能留存最后一個值。。。。很坑

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

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

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

於是我就在獲取到要渲染到穿梭框值的接口處，放了一個key，因為穿梭框渲染數據的順序和源數據的順序是一樣的，所以可以進行這樣的操作。然后就通過key匹配，拿到我要的東西。

   axios.post(this.SeverAddress + '/auth/login', obj)
          .then((resp) => {
              _this.loading = false;
             if (resp.data.recode == '0') {
               //登錄成功
               localStorage.setItem('ms_username',resp.data.username);
               localStorage.setItem('crm_usercode',resp.data.usercode);
               localStorage.setItem('crm_identify',resp.data.identify);
               localStorage.setItem('crm_comcode',resp.data.comcode);

               // var ele = this.$options.methods.userinfo('crm_comcode'); //1109-當前登錄機構00000000沒數據 先寫死了
               var ele = 13000006;
               var arr = [];
               var objs = {
                 'comCode':ele
               }
               axios.post(this.SeverAddress + '/CifSaUserController/queryCifSaUser', objs)
                 .then((eles) => {
               $.each(eles.data,function (index,i){
 arr.push({ 21  name:i.username, 22  codes:i.usercode, 23  key:index 24  }) 25                })
               var newBee = JSON.stringify(arr)
               localStorage.setItem('dataSend',newBee);
             })
             .catch((error) => {
                 console.log('false')
               });

對比：

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

 

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