需求:对el-table 选中行时复选框也被选中,选中复选框时触发行的相应变化
(拢共分两步)步骤:第一步:点击行时触发复选框的选择或取消; 第二步:点击复选框时触发相应行的变化(问题关键在怎么获取复选框选取的行)
1. 点击行时触发复选框的选择或取消
// <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事件,想要判断出点击复选框时触发的是哪一行时,则需要对上一次选中的列表项和这次选中的列表项对比
// 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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
原文地址:http://www.cnblogs.com/Ao-min/p/16823733.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性