vue-element-checkbox中对象传递

最新推荐文章于 2025-06-16 03:14:02 发布

weixin_33806914

最新推荐文章于 2025-06-16 03:14:02 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui 后端 ViewUI

原文链接：https://juejin.im/post/5cc7ed4ef265da036b4a7197

本文详细介绍了如何使用Vue.js中的watch特性，来监听数组中被选中项的变化，从而动态更新全选按钮的状态。当所有项都被选中时，全选按钮显示为勾选状态；当部分项被选中时，全选按钮显示为半选状态；当没有项被选中时，全选按钮则为未选中状态。

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

使用watch来监听选中数组checkList里面的数量,到底是显示isIndeterminate(-),还是checkAll(√)

获取数据

    <template>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="changeAll">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkList">
          <el-checkbox v-for="item in btnList" :label="item._id" :key="item._id">{{item.title}}</el-checkbox>
        </el-checkbox-group>
    </template>
复制代码

    data() {
        return {
                btnList:[],     // 所有列表
                checkList:[],   // 选中的数组,里面只能是[id,id,id]
                checkAll:undefined,
                isIndeterminate: undefined,
        }
    }
    created() {
        this.getBtnsList()
    },
    watch: {
        checkList(){
          let checkedCount = this.checkList.length      //获取选中列表的数量
          //如果等于所有列表的length,就为true,就使用(√)
          this.checkAll = checkedCount === this.btnList.length  
          //如果选中列表的数量大于0,小于列表的length,就使用(-)
          this.isIndeterminate = checkedCount > 0 && checkedCount < this.btnList.length; 
        }
    },
    methods: {
        // 单击全选checkbox
        changeAll(val){
          //这个必须是[1,2,3] ,不能为[{},{}],不然不能渲染到页面中去
          this.checkList = val ?   this.btnList.map(v => v.id) :[]      
        },
        // 获取数据
        getBtnsList(){
          this.listLoading = true
          btnFind().then(res=>{
            this.btnList = res
            this.listLoading = false
          })
        },
    }

复制代码