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

最新推荐文章于 2025-04-06 16:33:50 发布

m0_45043105

最新推荐文章于 2025-04-06 16:33:50 发布

阅读量2.9k

点赞数 1

本文链接：https://blog.youkuaiyun.com/m0_45043105/article/details/107594593

版权

本文介绍如何使用Vue.js的computed计算属性实现商品列表的全选功能，包括选中状态的同步更新、总价计算及格式化显示，以及选中项的删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <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>