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

 <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>
实现全选删除功能,可以按照以下步骤: 1. 定义一个数组来存储要删除的数据。 2. 在表格中添加一个全选框和每行数据的选择框。 3. 绑定全选框的点击事件,将所有行的选择框状态与全选框状态保持一致。 4. 绑定每行数据的选择框的点击事件,将该行数据的选择状态保存到数组中。 5. 绑定删除按钮的点击事件,遍历数组中的每个选择状态为 true 的数据并删除它们。 下面是一个简单的示例代码: ```html <template> <div> <table> <thead> <tr> <th><input type="checkbox" v-model="selectAll"></th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr v-for="(item, index) in dataList" :key="index"> <td><input type="checkbox" v-model="item.checked"></td> <td>{{ item.name }}</td> <td>{{ item.age }}</td> </tr> </tbody> </table> <button @click="deleteData">删除选中数据</button> </div> </template> <script> export default { data() { return { selectAll: false, dataList: [ { name: '张三', age: 20, checked: false }, { name: '李四', age: 25, checked: false }, { name: '王五', age: 30, checked: false } ] }; }, methods: { // 全选/取消全选 toggleSelectAll() { for (let i = 0; i < this.dataList.length; i++) { this.dataList[i].checked = this.selectAll; } }, // 删除选中数据 deleteData() { const deletedData = []; for (let i = 0; i < this.dataList.length; i++) { if (this.dataList[i].checked) { deletedData.push(this.dataList[i]); } } for (let i = 0; i < deletedData.length; i++) { const index = this.dataList.indexOf(deletedData[i]); if (index !== -1) { this.dataList.splice(index, 1); } } this.selectAll = false; } }, watch: { // 监听每行数据的选择框状态,更新全选框状态 dataList: { handler() { const checkedCount = this.dataList.filter(item => item.checked).length; this.selectAll = checkedCount === this.dataList.length; }, deep: true } } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值