el-checkbox使用shift选中

export default {
  data() {
    return {
      starNum: -1, // 作为起点
      pin: false, // 默认为false,未按住
      indeterminate: true // checkbox是否可选状态
    };
  },
  watch: {
    pin(val) {
      if (!val) {
        this.starNum = -1;
      }
    }
  },
  mounted() {
    // 监听按下键盘事件
    window.addEventListener("keydown", e => {
      if (e.keyCode === 16 && e.shiftKey) {
        this.pin = true;
      }
    });
    window.addEventListener("keyup", e => {
      this.pin = false;
    });
  },
  methods: {
    // 复选框多选功能
    /**
     * @param checked 选中的
     * @param allList 所有数据
     * @param selectData 返回选中的
     */
    selectionChange(checked, { allList, selectData }) {
      setTimeout(() => {
        const data = allList; // 获取所有数据
        const starNum = this.starNum; // 起点数 从-1开始
        const endIdx = data.findIndex(item => item === checked[checked.length - 1]); // 终点数
        if (this.pin && checked.includes(data[starNum])) { // 判断按住
          const sum = Math.abs(starNum - endIdx) + 1; // 这里记录终点
          const min = Math.min(starNum, endIdx); // 这里记录起点
          let i = 0;
          while (i < sum) {
            const index = min + i;
            const flagIdx = selectData.indexOf(data[index]); // 判断区间内的数据是否已选中
            if (flagIdx === -1) { // 值为-1表示未选中
              selectData.push(data[index]);
            }
            i++;
          }
        }
      }, 50);
    },
    checkPinClick(check, { allList, selectData }) {
      if (this.pin && selectData.includes(check) && this.starNum === -1) {
        this.starNum = allList.findIndex(item => item === check); // 记录起点
      }
    }
  }
};

在网上找了一些,但是好多都需要循环赋一个index,直接使用 findIndex 就OK

data.findIndex(item => item === checked[checked.length - 1])

整体是mixins引入使用


       

就可以了 

你可能感兴趣的:(javascript,java,前端)