elment-ui中列表与下拉框多选优化

多选优化：

对于表格和下拉框数据进行连续多行选择时，单行点击效率太低，需优化数据选择方式，提高工作效率。

解决方案

通过组合选择方式，按住shift键，然后选择两条不同行数据，将其范围内所有数据设为选中；

实现：

el-table 列表：

定义多选开启变量：

selectStart: null, //第一次点击的列表下标
selectPin: false   //开启多选模式的标识

对shift键点击事件进行监听，判断是否开启多选

mounted() {
    window.addEventListener('keydown', (event) => {
      //按住shift键时
      if (event.key === 'Shift' && event.shiftKey) {
        this.selectPin = true; 
        //注意不要使用Object进行封装selectPin数据，否者赋值会失效，原因暂时未知
        //例如 this.selectInfo.selectPin代替时，打印this.selectInfo发现selectPin未修改
      }
    });
    window.addEventListener('keyup', (event) => {
      //松开shift键时
      if (event.key === 'Shift') {
        this.selectPin = false;
      }
    });
  },
  beforeDestroy(){
    // 关闭当前页前销毁对shift键点击的监听
    window.removeEventListener('keydown', ()=>{})
    window.removeEventListener('keyup',()=>{})
  },

表格添加@select事件，进行监听行数据选中

 <el-table id="dataTable" ref="dataTable" v-loading="loading" :data="dataList"
              :height="dataTableHeight" @select="handleTableSelect">
      <el-table-column type="selection" width="55" align="center" />
      ---
</el-table>

定义handleTableSelect方法，实现shift多选

handleTableSelect(selection, row) {
      //selection为当前选中的数据存放的数组
      //row为当前点击的行数据
      let ids = selection.map(item => item.id)
      if(this.selectPin && ids .includes(row.requestId)) {
        let index = this.dataList.findIndex(item => item.id === row.id);
        if(this.selectStart === null) {
          this.selectStart = index;
        } else if(this.selectStart > index) {
          for(let i = index; i <= this.selectStart; i++) {
            let item = this.dataList[i];
            if(!selection.includes(item)) {
              selection.push(item);
              this.$refs.dataTable.toggleRowSelection(item, true);
            }
          }
          this.selectStart = null;
        } else if(this.selectStart < index) {
          for(let i = this.selectStart; i <= index; i++) {
            let item = this.dataList[i];
            if(!selection.includes(item)) {
              selection.push(item);
              this.$refs.dataTable.toggleRowSelection(item, true);
            }
          }
          this.selectStart = null;
        }
      } else if(this.selectPin) {
        this.selectStart = null;
      }
      //定义选择需要触发的自定义逻辑
      ----
    }

注意：

• 列表内容更新时，刷新selectStart变量，设置其值为null;
• 使用@select时间会忽略全选按钮操作，需额外定义@select-all事件；

el-select 下拉：

定义多选开启变量：

selectInputStart : null, //第一次点击的列表下标
selectPin: false   //开启多选模式的标识

对shift键点击事件进行监听，判断是否开启多选

mounted() {
    window.addEventListener('keydown', (event) => {
      //按住shift键时
      if (event.key === 'Shift' && event.shiftKey) {
        this.selectPin = true; 
        //注意不要使用Object进行封装selectPin数据，否者赋值会失效，原因暂时未知
        //例如 this.selectInfo.selectPin代替时，打印this.selectInfo发现selectPin未修改
      }
    });
    window.addEventListener('keyup', (event) => {
      //松开shift键时
      if (event.key === 'Shift') {
        this.selectPin = false;
      }
    });
  },
  beforeDestroy(){
    // 关闭当前页前销毁对shift键点击的监听
    window.removeEventListener('keydown', ()=>{})
    window.removeEventListener('keyup',()=>{})
  },

下拉框添加@click.native事件，进行监听下拉数据选中

<el-select v-model="form.idList" filterable multiple collapse-tags>
  <el-option
    v-for="(item,index) in options"
    :key="item.id"
    :label="item.code"
    :value="item.id"
    @click.native="handelSelectMultiple(item, index)"
  ></el-option>
</el-select>

定义handelSelectMultiple方法，实现shift多选

handelSelectMultiple(position, index) {
   if(this.selectPin && this.form.idList.includes(position.id)) {
     if(this.selectInputStart === null) {
       this.selectInputStart = index;
     } else if(this.selectInputStart > index) {
       for(let i = index; i <= this.selectInputStart; i++) {
         let item = this.options[i];
         if(!this.form.idList.includes(item.id)) {
           this.form.idList.push(item.id);
         }
       }
       this.selectInputStart = null;
     } else if(this.selectInputStart < index) {
       for(let i = this.selectInputStart; i <= index; i++) {
         let item = this.options[i];
         if(!this.form.idList.includes(item.id)) {
           this.form.idList.push(item.id);
         }
       }
       this.selectInputStart = null;
     }
   } else if(this.selectPin) {
     this.selectInputStart = null;
   }
}

注意：下拉框列表内容更新时，刷新selectInputStart 变量，设置其值为null