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.数据的双向绑定即可实现需求。