zhenyucheng / multicascaderbaseele Goto Github PK

View Code? Open in Web Editor NEW

25.0 2.0 15.0 3.4 MB

基于element-ui实现的多选级联组件，完全继承element-ui级联组件功能

Home Page: https://zhenyucheng.github.io/multiCascaderBaseEle/dist/index.html

JavaScript 9.50% Vue 53.42% HTML 0.23% CSS 36.85%

multicascaderbaseele's Introduction

multiCascaderBaseEle

基于element-ui实现的多选级联组件，完全继承element-ui级联组件功能

Usage

install

npm i multi-cascader-base-ele --save

use

import Vue from 'vue'
import Element from 'element-ui'
import App from './App.vue'
import multiCascader from 'multi-cascader-base-ele'
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.config.devtools = true


Vue.use(Element)
Vue.use(multiCascader)

new Vue({
    el: '#app',
    components: { App },
    template: '<App/>'
})

<el-multi-cascader class="multi-cascader" :options="options" multiple filterable select-children clearable collapse-tags
only-out-put-leaf-node
change-on-select v-model="selectedOptions"> </el-multi-cascader>

功能实例，以及选项

查看demo

multicascaderbaseele's People

Contributors

Stargazers

Watchers

Forkers

h-sven olivivian my729 fanwenlie leehaoyue muzixiaojun cymmint ismyshell zaidaldabbagh fangwentian byxll demonsdeng leondwong terry-group mydjin

multicascaderbaseele's Issues

组件console.log没有去除；监听change事件，选择一项会触发多次

1. menu组件：console.log没有去除

2. 监听change事件，选择一项会触发多次

请问能添加默认选择吗

我加上默认选择报错：selectedOptions:["1","11","51"]

能否将select组件的popper-append-to-body设为false

组件中使用到了el-select 组件吧，该组件有个属性默认是 popper-append-to-body=“true”

文档上说明 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false

我在使用中发现如果宽度不够自动向下展开的时候，位置出现了问题，所以如果将这个值该成false 应该能解决这个问题

当设置showAllLevels属性为false时，没有选项时显示undefined/When setting showAllLevels true,if there's no option, placeholder is undefined.

<el-multi-cascader
                ref="subject"
                class="l-d-no-border"
                style="width: 100%;"
                :placeholder="placeholder"
                :options="options"
                multiple
                :select-children="selectChildren"
                :only-out-put-leaf-node="onlyOutPutLeafNode"
                :collapse-tags="collapseTags"
                :filterable="filterable"
                :show-all-levels="showAllLevels"
                :expand-trigger="expandTrigger"
                :separator="separator"
                :disabled="disabled"
                @change="valueChange"
                :clearable="clearable"
                :change-on-select="changeOnSelect"
                :append-to-body="appendToBody"
                size="medium"
                v-model="checkedSubjects">
</el-multi-cascader>

      appendToBody: true,
      multiple: true,
      selectChildren: false,
      onlyOutPutLeafNode: false,
      collapseTags: false,
      filterable: false,
      showAllLevels: false,
      expandTrigger: 'hover',
      separator: '-',
      disabled: false,
      clearable: true,
      changeOnSelect: true

出现了描述中的问题

在设置showAllLevels为true后，就没有这个问题了，但是需要的是只显示选择的一级。

项目编译出错（没有修改任何代码），求解
Entrypoint example = example.js
[./example/App.vue] 2.12 KiB {example} [built]
[./example/index.js] 772 bytes {example} [built]
[./multiCascader/index.js] 435 bytes {example} [built]
[./node_modules/@babel/runtime/helpers/interopRequireDefault.js] 162 bytes {example} [built]
[./node_modules/vue-json-viewer/vue-json-viewer.js] 37.6 KiB {example} [built]
[./node_modules/vue/dist/vue.esm.js] 281 KiB {example} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:5000] (webpack)-dev-server/client?http://localhost:5000 9.26 KiB {example} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {example} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {example} [built]
[./node_modules/webpack/hot sync ^./log$] (webpack)/hot sync nonrecursive ^./log$ 170 bytes {example} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.66 KiB {example} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 90 bytes {example} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.33 KiB {example} [built]
[0] multi ./example/index.js 28 bytes {example} [built]
[1] multi (webpack)-dev-server/client?http://localhost:5000 (webpack)/hot/dev-server.js ./example/index.js 52 bytes {example} [built]
+ 235 hidden modules

ERROR in Error: webpack-internal:///./node_modules/@babel/runtime/helpers/typeof.js:8
if (typeof Symbol === "function" && (0, _typeof4.default)(Symbol.iterator) = == "symbol") {
^
TypeError: (0 , _typeof4.default) is not a function

typeof.js:8 _typeof2
[.]/[@babel]/runtime/helpers/typeof.js:8:60
typeof.js:22 _typeof
[.]/[@babel]/runtime/helpers/typeof.js:22:39
lodash.js:19 Object.eval
[.]/[lodash]/lodash.js:19:2329
lodash.js:9422 Object.eval
[.]/[lodash]/lodash.js:9422:14
lodash.js:942

const sizeInMap = this.initialInputHeight || 40;