el-table 选中行与复选框相互联动

需求：对el-table 选中行时复选框也被选中，选中复选框时触发行的相应变化

（拢共分两步）步骤：第一步：点击行时触发复选框的选择或取消； 第二步：点击复选框时触发相应行的变化（问题关键在怎么获取复选框选取的行）

1. 点击行时触发复选框的选择或取消

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

// <template> <el-table             class="right-panel-table"             :data="tableData"                        @selection-change="(val) => handleSelectionChange(val,'ischeckboxTick')"             ref="multipleTable"             v-loading="planLoading"             @cell-mouse-enter="handleMouseEnter"             @cell-mouse-leave="handleMouseOut"             @row-click="(row,column,event) => handleRowClick(row,column,event,'onclumn')"             highlight-current-row           >   //  <script>  添加row-click方法，点击列表行时触发 handleRowClick(row,column,event, onclumn){         if(onclumn === 'onclumn') {         this.isonClunm = true;       }       row.flag = !row.flag;       this.$refs.multipleTable.toggleRowSelection(row, row.flag);       if(row.flag) {         this.selectSatitleLatLon(row);       } else {         this.unselectSatitleLatLon(row);       } }

　　

添加完以上代码后，点击行，相应行前面的复选框会跟着选中或取消

2.点击复选框时触发相应行的变化（问题关键在怎么获取复选框选取的行）

当点击列表行时，先触发row-click事件，然后再触发 selection-change事件，点击复选框时只触发selection-change事件，想要判断出点击复选框时触发的是哪一行时，则需要对上一次选中的列表项和这次选中的列表项对比

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

// template部分同上 // <script> handleSelectionChange(val, checkFlag) {       let that = this;       if(checkFlag === 'ischeckboxTick') {         that.ischeckboxTick = true       }       // 获取当前增加的或者减少的那条数据       let n = {};       let currentVal = [];       val.forEach(item => {         currentVal.push(item);       })       if(val.length > that.multipleSelection.length) {         // 增加时比之前不一样的某个值         n = (val.filter(item => !that.multipleSelection.includes(item)))[0];       } else {         // 减少时与之前不一样的值         let oldSelect = [];         that.multipleSelection.forEach(item => {           oldSelect.push(item)         })         if(val.length === 0) {           n = that.multipleSelection[0];         } else {           that.multipleSelection.forEach((item, index) => {             let delIndex = 0;             currentVal.forEach((item1, index1) => {               if(item.sname === item1.sname && item.startTime === item1.startTime && item.endTime === item1.endTime) {                 delIndex = index;                 currentVal.splice(index1, 1);                 oldSelect.splice(delIndex, 1, '');                  }             })           })           oldSelect.forEach(item => {             if(item !== '') {               n = item             }           })         }       }         that.multipleSelection = val;  // 选中的所有项       that.isonClunm = false;       that.ischeckboxTick = false;           },

　　

作者：一只鱼_d589
链接：http://events.jianshu.io/p/665b80836eb2
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。