vue 全选,选中删除功能实现
<p><input type="checkbox" @click="change" :checked="isSelectAll" /><span>全选</span></p>利用vue computed计算属性,计算选中状态computed: {// 全选状态isSelectAll() {if (this.addlist.length =.
·
<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>
更多推荐
已为社区贡献5条内容
所有评论(0)