<template>
<!-- 按住shift鍵選擇 -->
  <div>
    <!-- 這里添加element組件table的select觸發(fā)事件，用來實(shí)現(xiàn)按住shift多選的 -->
    <el-table
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @select = "pinSelect"
      ref="multipleTable"  
      >
      
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="日期"
        width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        show-overflow-tooltip>
      </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection([tableData[1], tableData[2]])">切換第二、第三行的選中狀態(tài)</el-button>
        <el-button @click="toggleSelection()">取消選擇</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name:'ElementTable',
   data() {
      return {
        origin: -1, // 這里給一個變量作為起點(diǎn)
        pin: false, // 這里給一個變量，默認(rèn)為false，不按住
        tableData: [{
          date: '2016-05-01',
          name: '王幼虎',
          address: '上海市普陀區(qū)金沙江路 1511 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1512 弄'
        }, {
          date: '2016-05-03',
          name: '王中虎',
          address: '上海市普陀區(qū)金沙江路 1513 弄'
        }, {
          date: '2016-05-04',
          name: '王老虎',
          address: '上海市普陀區(qū)金沙江路 1514 弄'
        }, {
          date: '2016-05-05',
          name: '王死虎',
          address: '上海市普陀區(qū)金沙江路 1515 弄'
        }, {
          date: '2016-05-06',
          name: '王骨虎',
          address: '上海市普陀區(qū)金沙江路 1516 弄'
        }, {
          date: '2016-05-07',
          name: '王灰虎',
          address: '上海市普陀區(qū)金沙江路 1517 弄'
        }],
        multipleSelection: []
      }
    },
    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // 這里是select事件開始
      pinSelect (item, index) {
        const data = this.$refs.multipleTable.tableData; // 獲取所以數(shù)據(jù)
        const origin = this.origin; // 起點(diǎn)數(shù) 從-1開始
        const endIdx = index.index; // 終點(diǎn)數(shù)   
        if (this.pin && item.includes(data[origin])) { // 判斷按住
          const sum = Math.abs(origin - endIdx) + 1;// 這里記錄終點(diǎn)
          const min = Math.min(origin, endIdx);// 這里記錄起點(diǎn)
          let i = 0;
          while (i < sum) {
            const index = min + i;
              this.$refs.multipleTable.toggleRowSelection(data[index], true); // 通過ref打點(diǎn)調(diào)用toggleRowSelection方法，第二個必須為true
            i++;
          }
        } else {
          this.origin = index.index; // 沒按住記錄起點(diǎn)
        }
      }
      // 這里是select事件結(jié)束
    },
    // 這里是獲取鍵盤事件
    mounted(){
      window.addEventListener('keydown', code => { // 這個是獲取鍵盤按住事件
      // console.log(code); // 這個是你按住鍵盤打印出鍵盤信息，在瀏覽器中自行查看
      if (code.keyCode === 16 && code.shiftKey) { // 判斷是否按住shift鍵，是就把pin賦值為true
          this.pin = true;
        }
      });
      window.addEventListener('keyup', code => { // 這個是獲取鍵盤松開事件
        if(code.keyCode === 16){ // 判斷是否松開shift鍵，是就把pin賦值為false
          this.pin = false;
        }
      });
    },
    created(){
      this.tableData.forEach((item, index) => {// 遍歷索引,賦值給data數(shù)據(jù)
        item.index = index;
      })
    }
  }
</script>
<style scoped>

</style>