vue 利用计算属性本地过滤筛选数据,复选框勾选数据勾选状态不丢失

功能难点

由于这里的数据是调接口全部拿到了,所以这儿的搜索,其实就是一个本地过滤筛选的效果(利用计算属性实现)。
首先在没有搜索的情况下,勾选几条数据,然后输入搜索条件,得到搜索结果再勾选几个数据,接着去掉搜索条件,要做到之前的勾选数据的状态还在没有丢失,且结果是几次勾选的总和。
(项目中用的是iview的相关组件)

效果图片

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

相关代码

	// 要注意绑定的表格数据,:data="getfilterChooseemployeeData"
	//@on-selection-change,只要选中项发生变化时就会触发,返回值为 selection,已选项。`
 <Modal v-model="modal3" title="选择" :mask-closable="false" width="800">
     <Row>
        请输入员工姓名:
        <Input v-model="employeechooserealname" style="width: 200px" />
     </Row>
     <Row style="margin-top:16px;">
        <Table :columns="employeeColumns" :data="getfilterChooseemployeeData" border height="440" @on-selection-change="selectsomeemployee"></Table>
     </Row>
     <div slot="footer">
        <Button type="text" @click="modal3=false">取消</Button>
        <Button type="primary" @click="choose">确定</Button>
     </div>
 </Modal>
computed:{
	 // 选择人员--按员工姓名进行筛选
     getfilterChooseemployeeData() {
         let tmpdata = this.employeechooserealname;
         return this.employeeTable.filter(item => {
               return item.realname.indexOf(tmpdata) > -1
         });
     }
}
methods: {
	 // 勾选选择人员的事件--重点,本地进行筛选,勾选状态保持不变
            selectsomeemployee(selection) {
                let cc = this.getfilterChooseemployeeData;
                cc.forEach(item => {
                    if (selection.filter(itemtmp => {
                            return itemtmp.employeid == item.employeid;
                        }).length > 0) {
                        item._checked = true;
                    }else{
                        item._checked = false;
                    } 
                })
                this.employeeTable.forEach(item2 => {
                    for (var i = 0; i < cc.length; i++) {
                        if (cc[i].employeid==item2.employeid){
                            item2._checked = cc[i]._checked;       //赋值为cc[i]._checked,不能直接赋值true;
                        }
                    }
                })
            }
}
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值