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

前往低代码交流专区

更多推荐