Vue+ElementUI 的CheckBox小案例——默认选中数组对象中的某些符合条件的值

最新推荐文章于 2024-07-12 16:15:03 发布

Icon_酱

最新推荐文章于 2024-07-12 16:15:03 发布

阅读量1.2k

点赞数

分类专栏：前端 ElementUI Vue 文章标签： vue js

本文链接：https://blog.csdn.net/yyticon/article/details/109637243

版权

前端同时被 3 个专栏收录

12 篇文章 1 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

ElementUI

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>elementui测试</title>
</head>

<body>
    <div id="app">
        <el-button @click="checkPass()">查看没有及格的学生</el-button>

        <el-dialog :visible.sync="visible" :title="title">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkList" @change="handleCheckedChange">
                <el-checkbox v-for="(item,i) in dataList" :key="i" :label="item.name">
                    {{item.name}}
                </el-checkbox>
             
            </el-checkbox-group>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="saveData">确 定</el-button>
              </div>
        </el-dialog>
      </div>

</body>
<script>
    new Vue({
      el: '#app',
      data: function() {
        return { 
            visible: false,
            title:"",
            dataList:[
            {name:"甄聪明",score:"50"},
            {name:"灰太狼",score:"59"},
            {name:"沸羊羊",score:"65"},
            {name:"钱多多",score:"77"},
            {name:"喜洋洋",score:"79"},
            {name:"贾笨笨",score:"89"},
            {name:"王秀儿",score:"90"},
            {name:"懒羊羊",score:"99"},
            ],
            checkList:[],//选中的数据
            isIndeterminate:false,//是否半选
            checkAll:false,

         }
      },
      methods:{
        checkPass(){
            this.title = "查看没有及格的学生";
            //先选出符合条件的数据
            // this.checkList = this.dataList.filter(c=>c.score<60);//得到一个长度为2的数组  [{name:"甄聪明",score:"50"},{name:"灰太狼",score:"59"}]
            // this.checkList = this.checkList.map(c=>{return c.name});//["甄聪明", "灰太狼"]
            //合并写法
            this.checkList = this.dataList.filter(c=>c.score<60).map(c=>{return c.name});//["甄聪明", "灰太狼"]
            console.log(this.checkList);
            this.handleCheckedChange()
            this.visible = true;
        },
        handleCheckedChange(){
            let tolCount = this.dataList.length;
            let checkCount = this.checkList.length
            this.checkAll =  tolCount === checkCount?true:false;
            this.isIndeterminate = checkCount>0 && checkCount<tolCount ?true:false;
        },
        handleCheckAllChange(){
            this.isIndeterminate = false;
            this.checkList = this.checkAll?this.checkList = this.dataList.map(c=>{return c.name}):this.checkList = []
            //对上面那句代码的解释
            // if(this.checkAll){this.checkList = this.dataList.map(c=>{
            //     return c.name
            // })}else{
            //     this.checkList = []
            // }
        },
        saveData(){//保存修改
            console.log(this.checkList);

        }
      }
    })
  </script>

</html>

说明：