vue中原生table列表添加多选及全选功能

最新推荐文章于 2025-03-29 15:46:23 发布

~张小八~

最新推荐文章于 2025-03-29 15:46:23 发布

阅读量1k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_24441205/article/details/136322091

版权

本文介绍了如何在Vue.js应用中实现表格中的多选checkbox功能，包括初始化数组、单选/全选操作的处理逻辑，以及相应的DOM操作。

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

1.在table中添加多选的checkbox，并在data中定义存放多选数据的数组 selectedItems: [], // 初始化为空数组

1).<th><input type="checkbox" @click="selectAllFun"></th>  //头部全选checkbox
2). <td><input class="checkbox_el" type="checkbox"  @change="handleCheckboxChange($event, item)" :disabled="!item.sccbjlId"></td>
//列表中多选checkbox

在这里插入图片描述
2.全选及多选操作逻辑处理

  /*列表多选逻辑*/
        handleCheckboxChange(e, item) {
          // if(!item.sccbjlId){
          //   this.$message.error('没有抄表时间');
          //   return
          // }
          if (e.target.checked) {
            this.selectedItems.push(item); // 若选中则将对象添加到selectedItems数组中
          } else {
            const index = this.selectedItems.indexOf(item);
            if (index > -1) {
              this.selectedItems.splice(index, 1); // 若未选中则从selectedItems数组中移除对象
            }
          }
        },
        /*列表全选逻辑*/
        selectAllFun(event) {
         /* this.selectedItems = JSON.parse(JSON.stringify(this.meterList));*/
          for(let j=0;j<this.meterList.length;j++) {
            if (event.target.checked) {
              if (this.meterList[j].sccbjlId) {
                this.selectedItems.push(this.meterList[j]);
                $('.checkbox_el').prop('checked', true)   //设置checkbox选中状态
              } // 若选中则将对象添加到selectedItems数组中
            } else {
              this.selectedItems = []
              $('.checkbox_el').prop('checked', false)   //设置checkbox取消选中状态
            }
          }

        },

效果如下图
在这里插入图片描述