element table 表格shfit ctrl js多选复选

method中 

// 监听键盘
    keyDown() {
      // 取消选中
      document.onselectstart = function (event) {
        if (window.event) {
          event = window.event;
        }
        try {
          const the = event.srcElement;
          if (!((the.tagName == 'INPUT' && the.type.toLowerCase() == 'text') || the.tagName == 'TEXTAREA')) {
            return false;
          }
          return true;
        } catch (e) {
          return false;
        }
      },
      // 键盘按下事件
      document.onkeydown = (e) => {
        // 取消默认事件
        // e.preventDefault();
        // 事件对象兼容
        const e1 = e || event || window.event || arguments.callee.caller.arguments[0];
        // 键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40  回车：13   ctrl：17   shift：16
        switch (e1.keyCode) {
          case 16:
            // this.defaultshift = false;
            this.isshift = true; // 如果shift按下就让他按下的标识符变为true
            break;
          case 17:
            this.defaultctrl = false;
            this.isctrl = true; // 如果ctrl按下就让他按下的标识符变为true
            break;
        }
      };
      // 键盘抬起事件
      document.onkeyup = (e) => {
        // 取消默认事件
        // e.preventDefault();
        // 事件对象兼容
        const e1 = e || event || window.event || arguments.callee.caller.arguments[0];
        switch (e.keyCode) {
          case 16:
            this.shiftNum = '';
            this.defaultshift = true;
            this.isshift = false; // 如果shift抬起下就让他按下的标识符变为false
            break;
          case 17:
            this.defaultctrl = true;
            this.isctrl = false; // 如果ctrl抬起下就让他按下的标识符变为false
            break;
        }
        console.log("抬起",this.defaultshift,this.isshift)
      };
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    // 鍵盤選中
    selectImage(row, column, event) {
     
        //默认点击
         if(!this.isctrl&&!this.isshift)
      {
        const a = row;
        this.selectedState.push(a); 
        this.shiftNum = row.index; 
        if(this.selectedState.length>1){
          this.selectedState.shift()
          // this.selectedState.splice(0, 1);
          console.log("大于1",this.selectedState)
        }
         console.log("kk",a,this.selectedState.length,this.selectedState)
      }
      if (this.isctrl) { // 如果按下的是ctrl   
        this.elrowstyle = false;
            const str = row;
           let i = this.selectedState.indexOf(str);
           console.log("ii:",i)
      // 判断选中列表中是否包含这个点击的div
        if (i < 0) {
         
          this.selectedState.push(str); // 如果不包含就加进去
        } else {
          this.selectedState.splice(i, 1); // 如果包含就删，表示按下ctrl键点一下选中，在点一下取消选中
        }
      }
      if (this.defaultctrl||this.defaultshift) {
        console.log("清空")
        this.defaultctrl = false;
        this.defaultshift = false;
        this.selectedState = [];
         this.elrowstyle = true;
      }
      // 多選
      else if (this.isshift) { // 如果按下的是shift
        this.elrowstyle = false;
        console.log("按下sh",this.shiftNum,row.index)
        if (this.shiftNum === '') { // 如果还没点下第一个div
          this.shiftNum = row.index; // 让第一个div的下标赋值给shiftNum
          const str = row;
          const i = this.selectedState.indexOf(str);

          if (i < 0) {
            this.selectedState.push(str);
          } else {
            this.selectedState.splice(i, 1);
          }
        } 
         // 如果点击第一个了
        else{ if (this.shiftNum > row.index) { // 选中第一个的索引大于当前点击的索引
          console.log("111")
            for (let j = row.index; j <= this.shiftNum; j++) { // 把中间的都选中
              const str = this.varData[j];

              const i = this.selectedState.indexOf(str);
              if (i < 0) {
                this.selectedState.push(str);
              }
            }
          } else {
            for (let j = this.shiftNum; j <= row.index; j++) {
              const str = this.varData[j];

              const i = this.selectedState.indexOf(str);
              if (i < 0) {
                this.selectedState.push(str);
              }
            }
          }
        }
        //
      }

console.log("ss",this.isshift,this.selectedState)
    },
//改变element样式
    rowstyle(row, rowIndex) {
      // console.log('qwert', row.row, this.varData);
      for (let i = 0; i < this.selectedState.length; i++) {
        if (this.selectedState[i].tag_id === row.row.tag_id) {
          return { 'background-color': '#ecf5ff!important' };
        }
      }
    },

//return data中定义的相关变量

       elrowstyle: true,
     	isshift: false, // 快捷键 shift 是否被按下
      isctrl: false, // 快捷键 ctrl 是否被按下
      selectedState: [], // 上方div图切是否被多选中，如果多选了就把他的id放到这个列表里面，
      shiftNum: '', // shift 按下后选择的第一个div下标，因为shift的时候要点两个div都中间包裹的都要切换为被选中状态
      tableHeight:800,
      defaultctrl:'',
      defaultshift:'',

   <el-table
    :data="varData"
     id="out-table"
     class="myTable"
     ref="tableRef"
    :row-style="rowstyle"
    scrollbar-always-on=true
     height="100%"
     border
     :highlight-current-row="elrowstyle"
     @current-change="handleCurrentChange"
     @row-click="selectImage"
     :row-class-name="tableRowClassName"
     :header-cell-style="{background:'rgba(250, 250, 250, 1)',color:'#606266',height: '30px', margin: '0px', padding: '0px','text-align':'center'  }"
     :cell-style="cellstyle"
     style="width: 100%;height:100%">
     
      <el-table-column :show-overflow-tooltip='true' prop="tag_id" label="ID" />
    <el-table-column :show-overflow-tooltip='true' prop="tag_name" label="变量名" />


  </el-table>

最后

以上就是能干诺言为你收集整理的element table 表格shfit ctrl js多选复选的全部内容，希望文章能够帮你解决element table 表格shfit ctrl js多选复选所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。