element怎么找到取消勾选的行数据呢?

林小木
  • 264

element怎么找到取消勾选的行数据呢?有没有可以直接使用的函数呢?

回复
阅读 926
4 个回答
✓ 已被采纳

以官网的例子为例,可以监听multipleSelection的变化,当然如下方法适用于你只需要获取当前一次取消操作数据的情况。不管最终的具体业务需求如何,我觉得都可以用类似的反推的方式获取取消的行数据。

multipleSelection: {
      handler(newData, oldData) {
        if (newData.length < oldData.length) {
            //找到有差异的那一行数据
        }
      }
    }

正好上午写了个类似的demo。

https://www.lilnong.top/stati...

<el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @select="handleSelect">
            
handleSelect(list, item){
    console.log('handleSelect', arguments, list.includes(item))
},

handleSelect 回调第一个参数是所有选中的,第二个参数是单击的。所以判断一下是否存在即可。

<ul id="parent">
<li><input type='checkbox' /></li>
<li><input type='checkbox' /></li>
</ul>

在ul上监听点击事件,发现单击的是chekcbox且是取消勾选行为(checked属性为false)不就可以了
思路就是这样,具体代码根据情况修改

document.querySelector('#parent').addEventListener('click',e=>{
    if(e.target.tagName==='INPUT'){
        if(e.target.checked===false){
        //取消勾选的input找到了 这样获取input上的属性或者input的parentNode的属性就简单了吧
        }   
    }
})

个人觉得使用数组判断最好,余下的都有最少两个弊端,一个是全选或者多选的时候可能不会触发或者不好判断,一个是分页的时候都会触发导致数据消失,但相对来说使用数组的要简单,分页时候只要做一个标记就行,然后因为我们肯定是在分页以后才执行选择,所以监听没有分页的时候触发就好了。

你知道吗?

宣传栏