linzhengen / tech-notes

My tech notes write in github issues🧲
1 stars 0 forks source link

[20200907] ElementUI Transferの上下順番変える方法 #7

Open linzhengen opened 4 years ago

linzhengen commented 4 years ago

参考URL

https://blog.csdn.net/weixin_42618492/article/details/102844342

image image

handleUp(item, index) {

      //   item为选中的项    index为对应的index

      let self = this;

      item = self.item;   //选中值

      if (item.length == 1) {  //  因为右侧的选项是可以多选,但这里的上下移动事件,我做的是单项上移,每次上移一个空间,所                                                  以判断,当我的选中值只有一个选项时,进行上移操作

      //选中值的下标   【这里我不知道如何直接获取选中值的下标,所以用find()方法,在右侧值的数组里chooseRole中找选中项                                     对应的下标】

        self.chooseRole.find((val, indexs, arr) => { // find()方法 val-项,indexs-下标,arr数组

          if (val == item) { //  chooseRole数组的项val等于我选中的项item

            index = indexs;  // 数组项的下标就是我当前选中项的下标

          }

        });

        if (index == 0) { //当选择的项的下标为0,即第一个,则提醒没有上移的空间,选择其他项进行上移

          self.$message("没有上移的空间了");

          return;

        }

        // 上移-改变的数组(项和下标同时改变)

        let changeItem = JSON.parse(JSON.stringify(self.chooseRole[index - 1]));

        self.chooseRole.splice(index - 1, 1);

        self.chooseRole.splice(index, 0, changeItem);

      } else {

        self.$message.error("只能选择一条数据进行上下移动");

        return;

      }

    }
//下移事件

    handleDown(item, index) {

      let self = this;

      item = self.item;

      if (item.length == 1) {

        //选中值的下标

        self.chooseRole.find((val, indexs, arr) => {

          if (val == item) {

            index = indexs;

          }

        });

        if (index == self.chooseRole.length-1) {   // 这里是length-1,因为下标值从0开始

          self.$message("没有下移的空间了");

          return;

        }

        let changeItem = JSON.parse(JSON.stringify(self.chooseRole[index]));

         self.chooseRole.splice(index,1);

         self.chooseRole.splice(index + 1, 0, changeItem);

      } else {

        self.$message.error("只能选择一条数据进行上下移动");

        return;

      }

    }

  }