vue 全选，选中删除功能实现

墨蓝 2023-03-01 12:59 10阅读 0赞

<p>
            <input type="checkbox" @click="change" :checked="isSelectAll" /><span
              >全选</span
            >
          </p>

**利用vue computed计算属性，计算选中状态**

computed: { 
        // 全选状态
        isSelectAll() { 
          if (this.addlist.length == 0) { 
            return false;
          }
          return !this.addlist.find(item => !item.checked);
        }
      },

**input 添加点击事件**

//  点击全选方法
        change() { 
          if (this.isSelectAll) { 
            this.addlist.forEach(v => (v.checked = false));
          } else { 
            this.addlist.forEach(v => (v.checked = true));
          }
          console.log(this.isSelectAll);
        }

**选中删除**

//  选中删除
        del() { 
          for (
            var i = 0, flag = true, len = this.addlist.length;
            i < len;
            flag ? i++ : i
          ) { 
            if (this.addlist[i] && this.addlist[i].checked == true) { 
              this.addlist.splice(i, 1);
              flag = false;
            } else { 
              flag = true;
            }
          }
        },

**计算总价**

//   总价
        zong() { 
          let num = 0;
          this.addlist.map(item => { 
            if (item.checked == true) { 
              num += item.sum * item.monery;
            }
          });
          return num;
        },

**价钱加小数点**

Vue.filter('monery',function(data){ 
      return "￥"+data.toFixed(2)
    })

<p style="color:red;">合计{ {  zong() | monery }}</p>

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）

首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。

缺乏、安全感/ 2024年04月22日 22:30/ 0 赞/ 202 阅读

相关 vue中全选功能的实现

在Vue中实现全选功能可以通过以下步骤完成： 1. 首先在data中定义一个选中状态的变量，比如`isChecked`，并将其初始化为false。 2. 在全选的chec

小灰灰/ 2024年03月25日 11:26/ 0 赞/ 131 阅读

相关批量选中删除（包含全选）---jsp,servlet

0.引言前面文章已经实现了登录，查询，添加，修改和删除等功能，本篇文章在前面的基础上继续实现删除选中的功能。 ![watermark_type_d3F5LXplbmh

╰+攻爆jí腚メ/ 2023年10月04日 17:37/ 0 赞/ 117 阅读

相关 vue 全选，选中删除功能实现

<p> <input type="checkbox" @click="change" :checked="isSelectAll" /><spa

墨蓝/ 2023年03月01日 12:59/ 0 赞/ 11 阅读

相关 jQurey全选，反选，不全选功能实现

html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选，反选，不全选</t

╰+哭是因爲堅強的太久メ/ 2022年08月21日 10:53/ 0 赞/ 347 阅读

相关 Jquery 实现全选全不选功能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>attr</title>

ゞ浴缸里的玫瑰/ 2022年06月05日 00:16/ 0 赞/ 427 阅读

相关 vue实现完整的购物车功能(包括单选全选，删除商品和结算商品功能)

首先来看看效果图预览地址：[http://xy.xxiaoyuan.top/demo/shopCart/\/][http_xy.xxiaoyuan.top_demo_s

心已赠人/ 2022年01月23日 08:15/ 0 赞/ 800 阅读

相关 vue实现checked 全选功能

记录一下 module.data = { result: \{\}, items: \[\] //初始化全选按钮, 默认不选 ,isCheckedA

亦凉/ 2021年11月10日 14:44/ 0 赞/ 395 阅读

相关 vue.js单选全选删除

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

我不是女神ヾ/ 2021年06月26日 16:06/ 0 赞/ 572 阅读

相关 vue实现全选、全不选和部分选择功能

在开发项目的过程当中，特别是开发后台管理系统时，会有很多的数据等待管理员去统一管理，所以有时候还需要将一些数据导出，然后打印，这是很有必要的，因为数据可以帮助分析这个产品是否具

Dear 丶/ 2021年06月11日 15:12/ 0 赞/ 573 阅读