vue+element 中一键全选开关的实现

vue+element 中一键全选开关的实现

在公司的报表系统中有一个小需求需要实现一键全选开关。

先上代码：

<template>
    <el-main>
    <el-switch v-model="sall" @change="openall"></el-switch>
    <el-switch v-model="s1" ></el-switch>
    <el-switch v-model="s2" ></el-switch>

    </el-main>

</template>
<script>
    export default {
     
     
        data() {
     
     
            return {
     
     
                sall: false,
                s1: false,
                s2: false,
            }
        },
        methods: {
     
     
            openall() {
     
     
                if (this.sall == true) {
     
     
                    this.s1 = this.s2 = true;
                } else
                    this.s1 = this.s2 = false;
            }
        }
    }
</script>

实现步骤

1.@change监听开关状态。
2.当总选开关为打开状态时设置所有开关的值为true，即打开，反之关闭。
3.数据的双向绑定即可实现需求。