vue+element中仅单条数据的修改与批量数据的删除按钮禁用的判断

<template>
    <div id="model" class="app-container">
        <el-form>
            <el-form-item>
                <el-button
                    type="primary"
                    size="mini"
                    :disabled="single"
                    @click="handleClickAdd(null)"
                    >修改</el-button
                >
                <el-button
                    type="primary"
                    size="mini"
                    :disabled="multiple"
                    @click="handleClickDelete(null)"
                    >删除</el-button
                >
            </el-form-item>
        </el-form>
        <el-table
            :data="modelData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
            <el-table-column label="设备编号" align="center"></el-table-column>
            <el-table-column label="设备名称" align="center"></el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            modelData: [],
            // 单个禁用
            single: true,
            // 多个禁用
            multiple: true,
            // 多选的数据
            ids: [],
        };
    },
    methods: {
        // 多选时拿到id
        handleSelectionChange(val) {
            // 除了val长度为1时，其它情况按钮都被禁用！
            this.single = (val.length != 1);
            // 用0 == false为true来做判断。除了val长度为0时，其它情况按钮不被禁用！
            this.multiple = (!val.length);
            this.ids = val.map((item) => item.id);
            // this.ids = val.map((item) => {
            //     return item.id;
            // }); // 等同于上
        },
    },
};
</script>
<style lang="scss"></style>