**
使用场景:
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>
我把静态数据也写进来了,方便测试,干货满满
效果图:这里原磅回皮不能与其他数据同时选择
ok,算是自己记录一下。haha~