Question

vue点击按钮判断elemnet表格是否为全选状态

Answer 1

主要代码如下：

<template>
    <div style="height: 100%;" v-loading.lock="loading">
        <section style="height: 100%; overflow-y: scroll;">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                        <el-button type="primary" @click="show">判断是否全选</el-button>  状态：{{msg}}
                </div>
                <el-table :data="tableData" border style="width: 100%" header-row-class-name="headerRowClass" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column label="序号" type="index" width="70">
                    </el-table-column>
                    <el-table-column prop="name" label="演练名称" width="200px">
                    </el-table-column>
                </el-table>
            </el-card>
        </section>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                multipleSelection:[],
                tableData: [
                    {
                        name: "数据1",
                    },
                    {
                        name: "数据2",
                    }
                ],
                msg:""
            }
        },
        methods: {
            //判断是否全选
            show() {
                if(this.tableData.length==this.multipleSelection.length){
                    this.msg='全选';
                }else{
                    this.msg='没有全选';
                }
            },
            // 选择发生改变是执行
            handleSelectionChange(val){
                this.multipleSelection = val;
            },

        },
    }
</script>

运行截图：

当选择一个时点击“判断是否全选按钮”显示如下：

当全部选择时点击“判断是否全选按钮”显示如下：