webcoderj / ele-multi-cascader Goto Github PK

选择多级以后，输入框中的小叉号不能删除

获取的数据有点长，展示不全，没有相应的show-overflow-tooltip，或者单独改变每个menu_item的长度大小

父节点选中，不能默认全选子节点吗？

点击其他select组件的时候无法自动关闭ele-multi-cascader组件的popover

点开之后出现select组件的下拉菜单，这个应该警用吧

项目中安装插件，部署上线时，打包提示报错，

比如：归属类需求，一般需要一级单选，二级多选

数据量比较大或者变化的频繁时需要动态加载选项，会支持吗

为何的二级选项跑到这边的来了呢？

    <div class="menu">
      <div class="title">
        <div class="title-content">语音实时监控</div>
        <div class="tips">
          <span>最近10分钟的累积数据，每5秒钟刷新一次</span>
        </div>
      </div>
      <div class="select-menu">
        <el-form
          ref="form"
          :rules="rules"
          :inline="true"
          :model="form"
        >
          <el-form-item prop="selectedProductions">
            <ele-multi-cascader
              :options="productionOptions"
              v-model="form.selectedProductions"
              placeholder="选择平台/机型/机芯"
              size="medium"
              :clearable="true"
              :collapse-tags="true"
              :show-all-levels="true"
              :output-level-value="true"
              :select-children="true"
            ></ele-multi-cascader>
          </el-form-item>
          <el-form-item prop="selectedLocations">
            <ele-multi-cascader
              :options="locationOptions"
              v-model="form.selectedLocations"
              placeholder="选择地区"
              size="medium"
              :clearable="true"
              :collapse-tags="true"
              :show-all-levels="true"
              :output-level-value="true"
              :select-children="true"
              @clickItem="clickItem"
            ></ele-multi-cascader>
          </el-form-item>
        </el-form>
      </div>
    </div>

.voice-monitor {
  margin: 0 5%;
}
.menu {
  display: flex;
  height: 54px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: "#fff";
}
.title-content {
  font-size: 18px;
  font-weight: bolder;
  color: #001309;
  height: 27px;
}
.tips {
  font-size: 12px;
  color: #879099;
  height: 27px;
  line-height: 27px;
}
.select-menu {
  float: right;
}

.echart-title {
  display: flex;
  height: 50px;
  padding: 0 3%;
  margin: 0;
  box-shadow: 0 3px 8px #888;
  border-bottom: 1px solid #c0bebe;
  border-radius: 10px 10px 0 0;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}
.echart-container {
  margin-bottom: 50px;
}
.echart-menu {
  display: flex;
  width: 18%;
  flex-direction: row;
  justify-content: space-around;
}

这是模板和样式，我是而没有写对吗？

你好，你的组件很棒，但是想提问能不能加搜索功能？

选完之后，点某一个按钮将v-model绑定的值设为空，选择框里还存在之前的值。看了下源码，感觉是跟this.hasInitModel有关

两层级的数据变为一层级的，同时，UI也会出现问题

不同父级下各有一个子级相同名字时，多选这些相同名字的子级后，小叉号删除不了最后一个，没有设置show-all-levels为true的情况下。

我先選中類別
然後再去按大類別
這時候應該是大類別下的中類別全選(小類別亦全選)
然後我再按一次大類別
應該要全部都沒選
結果一開始按的中類別還亮著

你好，我看到你的源码里面有如下代码

.cascader-menu {
width: 160px !important;
}
请问下这个样式能否去掉呢？
自适应宽度不是更好么？

请问有个需求，就是怎么将还有子节点的数据不要加载到输入框

我在ie11下项目报错,错误原因 语法错误

每个人不一样的城市，第一个点明细，城市 显示 正常，第一次也正常，第三次，输入框的文字还是第二次那个文字。不知道你有没有遇到过这问题

作者在源码中将witdh 写死在了160px 导致如果label长度大于160 会被忽略掉，我将你的源码中这段css删除后可以正常显示完成的label了，但是发现当展开三级之后，还是会因为label过长导致样式错位
后来发现您源码中动态改变菜单宽度的代码
// 改变菜单宽度 setPopperWidth() { let width = (160 + 1) * this.casTree.length; document.getElementsByClassName(this.classRef)[0].style.width = width + "px"; }

源码中 设置了 .cascader-popper {width:100%}

我尝试将这些代码删除，解决了这个问题

不知道作者当初设置这些代码的原因是什么
这里依然是基于160 * 子菜单个数算的，这依然限制了面板的长度，导致错位了，请问作者对这个问题怎么解决

点击输入框，后面的icon会展开收起的变化，但是popover没有收起

输入框条数限制以和子选项单选的需求有支持吗？

作者目前的实现，全选节点时，会把所有的子节点，显示到输出框，并且绑定的model值，把所有孩子节点全部加入

有时候，我们可以支持选择父级节点，在全选时，不需要再迭代子节点的选中
当子节点不全选时，显示选中的子节点

代码可以改一处： main.vue 中 pickCheckedItem

loop方法中的子节点的迭代if条件，变成else if即可

if (item.checked) {
const newItem = removeParent(item)
vm.selectedItems.push(newItem)
vm.selectedLabels.push(vm.getLevel(item, vm.labelKey, vm.showAllLevels))
vm.selectedValues.push(vm.getLevel(item, vm.valueKey, vm.outputLevelValue))
} else if (hasArrayChild(item, vm.childrenKey)) {
loop(item[vm.childrenKey])
}

比如 ，我现在移除北京。现在能拿到北京，但是在移除回调中，能不能拿到对应的code

想要的效果是只有最后一级才支持多选，上一级不能多选

过程： v-model绑定数组ARR，多选完成后，根据其他逻辑判断，删除了ARR最后一项；

问题： 选择框和下拉列表里的选中状态都未更新。

options里面也有数据 没有显示

建议：将/src/main/main.vue Line53移到里面

不支持组件局部注册吗

在demo里面，中间那一列是怎么配置成禁止选择的？

有没有想法实现模糊搜索，最近工作比较闲，打算实现下这个功能

[Vue warn]: Duplicate keys detected: '服装'. This may cause an update error.

你好，我做vue项目不多，刚刚在新项目遇到级联多选的问题，感谢提供这么棒的工具。
现在有想增加一个功能：
第一级显示北京，第二级有东城区，西城区等；
点击东城区的话，目前只展示东城区。
我想修改成“北京/东城区”来展示。

我得怎么修改呢？或者说该怎么配置？
Thx

需要增加一个全选选项，但是值改变了，页面的选中状态没有变化。

我的思路是 监听 clickItem 事件，当点击当全选选项时，判断是否是选中还是取消。如下：

    clickItem(item) {
      let label = item.label;
      let checked = item.checked;
      switch (label) {
        case "全选":
          if (checked) {
            console.log("选中全选");
            console.log(this.form.selectedLocations);
            this.form.selectedLocations = allProvinces;
            console.log(this.form.selectedLocations);
          } else {
            console.log("取消全选");
            console.log(this.form.selectedLocations);
            this.form.selectedLocations = [];
            console.log(this.form.selectedLocations);
          }
          break;
        default:
          break;
      }
    },

请问这是为什么呢？

谢谢开发了这个组件！！
后期是否会支持配置为“hover”展示次级菜单？

现：可以选择不同级内容中的子级

改：只能选择同一级内容下的子级

[Vue warn]: Invalid prop: type check failed for prop "selectChildren". Expected Boolean, got String with value "true".

"ele-multi-cascader": "^2.0.7",
安装的是 2.0.7 版本

lable有30px的margin-right，在App.vue中修改后不生效，加了/deep/也不生效。
vue版本为"^2.6.6"

最好不需要用户设置data，配置一个属性就可以那种。

clearable和popper-class这两个属性不生效耶~

提示 main.vue?4a51:512 You must return a Promise instance in loadChildrenMethod ! 请问网络请求回来的数据需要满足什么样的格式

getLoadChildrenMethod(value) {
      let test = [
        { label: '微信扫码1', value: '1-1' },
        { label: '微信扫码2', value: '1-2' },
        { label: '微信扫码3', value: '1-3' },
        { label: '微信扫码4', value: '1-4' }
      ]
      return new Promise((resolve, reject) => {
        console.log(test)
        resolve(test)
      })
    }