element UI多选和反选的demo

最新推荐文章于 2023-03-09 13:46:43 发布

我么得感情也没有钱

最新推荐文章于 2023-03-09 13:46:43 发布

阅读量1k

点赞数

分类专栏： vue Element-ui 文章标签： vue elementui

本文链接：https://blog.csdn.net/qq_40329458/article/details/124249865

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Element-ui

2 篇文章 0 订阅

订阅专栏

使用场景：

1.当使用element ui多选组件时。有条数据与其他数据不能，两者不能同时存在时使用此逻辑。
2.el-table 有数据和其他数据不能同时多选时。

**可以根据自己的需求做不同调整**
直接上图：

<!DOCTYPE html>
<html>
    <head>
        <title>demo</title>
        <meta charset="UTF-8">   
        <link rel="stylesheet" href="./script/element.css">
        <script src="./script/vue.js"></script>
        <script src="./script/element.js"></script>
        
    </head>
    <body>     
        <div id="app">     
            <el-cascader-panel
                v-model="vvval"
                :options="options"
                :props="props"
                @change="changeFunc"
                :emitPath="false"
                ref="cascader"
            >
                <template slot-scope="{ node, data }">
                    <span>{{ data.label }}</span>
                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
            </el-cascader-panel>
        </div>       
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                vvval:[],
                props: {
                    multiple: true,
                },
                oldArr:[],
                isFisrt: false,
                options: [
                    {
                        value: "zhinan",
                        label: "我是1",
                        children: [
                            {
                                value: "shejiyuanze",
                                label: "设计原则",
                                children: [
                                    {
                                        value: "yizhi",
                                        label: "一致",
                                    },
                                    {
                                        value: "fankui",
                                        label: "反馈",
                                    },
                                    {
                                        value: "xiaolv",
                                        label: "效率",
                                    },
                                    {
                                        value: "kekong",
                                        label: "可控",
                                    },
                                ],
                            },
                            {
                                value: "daohang",
                                label: "导航",
                                children: [
                                    {
                                        value: "cexiangdaohang",
                                        label: "侧向导航",
                                    },
                                    {
                                        value: "dingbudaohang",
                                        label: "顶部导航",
                                    },
                                ],
                            },
                        ],
                    },
                    {
                        value: "zujian",
                        label: "我是2",
                        children: [
                            {
                                value: "basic",
                                label: "Basic",
                                children: [
                                    {
                                        value: "layout",
                                        label: "Layout 布局",
                                    },
                                    {
                                        value: "color",
                                        label: "Color 色彩",
                                    },
                                    {
                                        value: "typography",
                                        label: "Typography 字体",
                                    },
                                    {
                                        value: "icon",
                                        label: "Icon 图标",
                                    },
                                    {
                                        value: "button",
                                        label: "Button 按钮",
                                    },
                                ],
                            },
                            {
                                value: "form",
                                label: "Form",
                                children: [
                                    {
                                        value: "radio",
                                        label: "Radio 单选框",
                                    },
                                    {
                                        value: "checkbox",
                                        label: "Checkbox 多选框",
                                    },
                                    {
                                        value: "input",
                                        label: "Input 输入框",
                                    },
                                    {
                                        value: "input-number",
                                        label: "InputNumber 计数器",
                                    },
                                    {
                                        value: "datetime-picker",
                                        label: "DateTimePicker 日期时间选择器",
                                    },
                                    {
                                        value: "upload",
                                        label: "Upload 上传",
                                    },
                                    {
                                        value: "rate",
                                        label: "Rate 评分",
                                    },
                                    {
                                        value: "form",
                                        label: "Form 表单",
                                    },
                                ],
                            },
                            {
                                value: "navigation",
                                label: "Navigation",
                                children: [
                                    {
                                        value: "menu",
                                        label: "NavMenu 导航菜单",
                                    },
                                    {
                                        value: "tabs",
                                        label: "Tabs 标签页",
                                    },
                                    {
                                        value: "breadcrumb",
                                        label: "Breadcrumb 面包屑",
                                    },
                                    {
                                        value: "dropdown",
                                        label: "Dropdown 下拉菜单",
                                    },
                                    {
                                        value: "steps",
                                        label: "Steps 步骤条",
                                    },
                                ],
                            },
                            {
                                value: "others",
                                label: "Others",
                                children: [
                                    {
                                        value: "dialog",
                                        label: "Dialog 对话框",
                                    },
                                    {
                                        value: "tooltip",
                                        label: "Tooltip 文字提示",
                                    },
                                    {
                                        value: "popover",
                                        label: "Popover 弹出框",
                                    },
                                    {
                                        value: "card",
                                        label: "Card 卡片",
                                    },
                                    {
                                        value: "carousel",
                                        label: "Carousel 走马灯",
                                    },
                                    {
                                        value: "collapse",
                                        label: "Collapse 折叠面板",
                                    },
                                ],
                            },
                        ],
                    },
                    {
                        value: "ziyuan",
                        label: "我也是2",
                        children: [
                            {
                                value: "axure",
                                label: "Axure Components",
                            },
                            {
                                value: "sketch",
                                label: "Sketch Templates",
                            },
                            {
                                value: "jiaohu",
                                label: "组件交互文档",
                            },
                        ],
                    },
                ],
            },
            methods: {
                changeFunc(val){
                    if(val.every(item => item.includes('zhinan'))){
                        this.isFisrt = true;
                    }
                    if(this.isFisrt && !val.every(item => item.includes('zhinan'))){
                        let arr = val.filter(item => !item.includes('zhinan'));
                        this.vvval = [...arr];
                        this.isFisrt = false;
                    }
                    else if(!this.isFisrt && val.some(item => item.includes('zhinan'))){
                        let arr = val.filter(item => item.includes('zhinan'));
                        this.vvval = [...arr];
                        this.isFisrt = true;
                    }
                    console.log(this.isFisrt);
                }
            },
        })
    </script>   
</html>