Element Cascader 级联选择器禁止选择N个-一一网

需求

现在有个树形结构，产品业务要求用户选择的第一层级不能大于2个。

实现

vue2+element2 使用cascader级联组件那来写个简单demo吧，通过打印我们发现data就是我们选中的value数组

选中的值使用了这个

通过数据能发现data是一维数组，而不是原来的树形结构。如果选中的结果是和树形结构保持一致那就很好判断了。

要想实现我们的需要，只能从树形结构数据的 disabled 着手。
试试disabled，修改一个数据源试试。

咦。有效果，那就好办了。

思路

当chenge的时候，我判断已经选择了几个一级目录，当大于等于2的时候，其他一级目录disabled就可以了。由于data是一维数组，那现在的问题就是，怎么从data中判断出来我选中了那个一级目录。自然能想到一个词includes，现在修改一个数据源options 增加一个属性dataNodes 来表示当前目录下所有的值
我们使用Props emitPath：在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
上代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
  <div id="app">
    <el-cascader v-model="value" :options="options" :props="{multiple:true,expandTrigger: 'hover' ,emitPath:false}"
      :collapse-tags="true" @change="handleChange" :show-all-levels="false">
    </el-cascader>
  </div>
</body>
<script>
  const options = [{
    value: 'zhinan',
    label: '指南',
    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: '组件',
    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: 'select',
        label: 'Select 选择器'
      }, {
        value: 'cascader',
        label: 'Cascader 级联选择器'
      }, {
        value: 'switch',
        label: 'Switch 开关'
      }, {
        value: 'slider',
        label: 'Slider 滑块'
      }, {
        value: 'time-picker',
        label: 'TimePicker 时间选择器'
      }, {
        value: 'date-picker',
        label: 'DatePicker 日期选择器'
      }, {
        value: 'datetime-picker',
        label: 'DateTimePicker 日期时间选择器'
      }, {
        value: 'upload',
        label: 'Upload 上传'
      }, {
        value: 'rate',
        label: 'Rate 评分'
      }, {
        value: 'form',
        label: 'Form 表单'
      }]
    }, {
      value: 'data',
      label: 'Data',
      children: [{
        value: 'table',
        label: 'Table 表格'
      }, {
        value: 'tag',
        label: 'Tag 标签'
      }, {
        value: 'progress',
        label: 'Progress 进度条'
      }, {
        value: 'tree',
        label: 'Tree 树形控件'
      }, {
        value: 'pagination',
        label: 'Pagination 分页'
      }, {
        value: 'badge',
        label: 'Badge 标记'
      }]
    }, {
      value: 'notice',
      label: 'Notice',
      children: [{
        value: 'alert',
        label: 'Alert 警告'
      }, {
        value: 'loading',
        label: 'Loading 加载'
      }, {
        value: 'message',
        label: 'Message 消息提示'
      }, {
        value: 'message-box',
        label: 'MessageBox 弹框'
      }, {
        value: 'notification',
        label: 'Notification 通知'
      }]
    }, {
      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: '资源',
    children: [{
      value: 'axure',
      label: 'Axure Components'
    }, {
      value: 'sketch',
      label: 'Sketch Templates'
    }, {
      value: 'jiaohu',
      label: '组件交互文档'
    }]
  }];
  // 获取到原始数据后，加工options
  function initOptions() {
    options.forEach(item => {
      const dataNode = [];
      item.disabled = false;
      item.dataNode = dataNode;
      setDataNode(dataNode, item)
    });
    // 由于不知道层级深度，所以我们需要递归写入dataNode
    function setDataNode(dataNode, obj) {
      if (Array.isArray(obj.children)) {
        obj.children.forEach(item => {
          dataNode.push(item.value);
          setDataNode(dataNode, item)
        })
      }
    }
    console.log(options);
  }

  initOptions()

  const app = new Vue({
    el: '#app',
    data: {
      value: [],
      options
    },
    methods: {
      handleChange(data) {
        // 当change的时候去判断已经选择了几个一级目录
        const valueSet = new Set();
        data.forEach(el => {
          this.options.forEach(item => {
            if (item.dataNode.includes(el)) {
              valueSet.add(item.value);
            }
          })
        });
        const list = Array.from(valueSet);
        console.log(list);
        this.options.forEach(item => {
          item.disabled = list.length === 2 && !list.includes(item.value);
        });
        console.log(this.options);
      }
    },
  });
</script>

</html>
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端