【vue】element-plus多选框代码（初学者版）

对于我这个初学者来说，做一名cv工程师往往会花费很多时间琢磨怎么把代码跑起来，简单记录一下我运行成功的代码，希望用最容易的代码帮助大家节省宝贵的时间。

运行效果

vue代码

<template>
    <div>
        <!-- 全选 -->
        <el-checkbox v-model=checkAll :indeterminate=this.isIndeterminate @change=handleCheckAllChange>全选</el-checkbox>
        <!-- 备选数据 -->
        <el-checkbox-group v-model=checkedCities @change=handleCheckedCitiesChange>
            <el-checkbox v-for="city in cities" :key="city" :label="city">
                {{city}}
            </el-checkbox>
        </el-checkbox-group>
    </div>
</template>

<script>
import { ref } from 'vue'
export default {
    data() {
        return {
            checkAll: ref(false),//定义了“全选的初始状态”
            isIndeterminate: ref(false),//定义全选前面图标的状态
            checkedCities: ref([]),  // 已经勾选的列表
            cities: ['选项1', '选项2', '选项3', '选项4']//选项列表
        }
    },
    mounted() {
    },
    methods: {
        handleCheckAllChange(val) {
            this.checkedCities = val ? this.cities : []
            this.isIndeterminate = false
        },
        handleCheckedCitiesChange(value) {
            const checkedCount = value.length
            this.checkAll = checkedCount === this.cities.length
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
        }
    }
}

</script>
    
<style scoped></style>

代码截图