|
@@ -1,87 +1,103 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <div v-if="editable"
|
|
|
|
|
- v-clickoutside="handleClose"
|
|
|
|
|
- class="el-tree-select"
|
|
|
|
|
- @click="toggleTree">
|
|
|
|
|
- <div v-if="multiple"
|
|
|
|
|
- ref="tags"
|
|
|
|
|
- :style="{ 'max-width': inputWidth - 32 + 'px' }"
|
|
|
|
|
- class="el-tree-select__tags">
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-if="editable"
|
|
|
|
|
+ v-clickoutside="handleClose"
|
|
|
|
|
+ class="el-tree-select"
|
|
|
|
|
+ @click="toggleTree"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-if="multiple"
|
|
|
|
|
+ ref="tags"
|
|
|
|
|
+ :style="{ 'max-width': inputWidth - 32 + 'px' }"
|
|
|
|
|
+ class="el-tree-select__tags"
|
|
|
|
|
+ >
|
|
|
<transition-group @after-leave="resetInputHeight">
|
|
<transition-group @after-leave="resetInputHeight">
|
|
|
<template v-for="(item,i) in selected">
|
|
<template v-for="(item,i) in selected">
|
|
|
- <el-tag :key="item.value+i"
|
|
|
|
|
- :closable="!selectDisabled"
|
|
|
|
|
- :size="collapseTagSize"
|
|
|
|
|
- type="info"
|
|
|
|
|
- disable-transitions
|
|
|
|
|
- @close.stop="deleteTag(item)">
|
|
|
|
|
|
|
+ <el-tag
|
|
|
|
|
+ :key="item.value+i"
|
|
|
|
|
+ :closable="!selectDisabled"
|
|
|
|
|
+ :size="collapseTagSize"
|
|
|
|
|
+ type="info"
|
|
|
|
|
+ disable-transitions
|
|
|
|
|
+ @close.stop="deleteTag(item)"
|
|
|
|
|
+ >
|
|
|
<span class="el-tree-select__tags-text">{{ displayMode==="name"? item.label:item.path }}</span>
|
|
<span class="el-tree-select__tags-text">{{ displayMode==="name"? item.label:item.path }}</span>
|
|
|
</el-tag>
|
|
</el-tag>
|
|
|
</template>
|
|
</template>
|
|
|
</transition-group>
|
|
</transition-group>
|
|
|
- <input v-if="filterable"
|
|
|
|
|
- ref="input"
|
|
|
|
|
- v-model="query"
|
|
|
|
|
- :disabled="selectDisabled"
|
|
|
|
|
- :placeholder="currentPlaceholder"
|
|
|
|
|
- :autocomplete="false"
|
|
|
|
|
- :style="{ width: inputLength + 'px'}"
|
|
|
|
|
- type="text"
|
|
|
|
|
- class="el-tree-select__input"
|
|
|
|
|
- @focus="handleFocus"
|
|
|
|
|
- @keydown.esc.stop.prevent="visible = false"
|
|
|
|
|
- @keydown.delete="deletePrevTag"
|
|
|
|
|
- @input="e => handleQueryChange(e.target.value)">
|
|
|
|
|
|
|
+ <input
|
|
|
|
|
+ v-if="filterable"
|
|
|
|
|
+ ref="input"
|
|
|
|
|
+ v-model="query"
|
|
|
|
|
+ :disabled="selectDisabled"
|
|
|
|
|
+ :placeholder="currentPlaceholder"
|
|
|
|
|
+ :autocomplete="false"
|
|
|
|
|
+ :style="{ width: inputLength + 'px'}"
|
|
|
|
|
+ type="text"
|
|
|
|
|
+ class="el-tree-select__input"
|
|
|
|
|
+ @focus="handleFocus"
|
|
|
|
|
+ @keydown.esc.stop.prevent="visible = false"
|
|
|
|
|
+ @keydown.delete="deletePrevTag"
|
|
|
|
|
+ @input="e => handleQueryChange(e.target.value)"
|
|
|
|
|
+ >
|
|
|
</div>
|
|
</div>
|
|
|
- <el-input ref="reference"
|
|
|
|
|
- v-model="selectedLabel"
|
|
|
|
|
- :disabled="selectDisabled"
|
|
|
|
|
- :readonly="selectReadonly"
|
|
|
|
|
- :validate-event="false"
|
|
|
|
|
- :size="selectSize"
|
|
|
|
|
- :class="{ 'is-focus': visible }"
|
|
|
|
|
- :placeholder="currentPlaceholder"
|
|
|
|
|
- type="text"
|
|
|
|
|
- @focus="handleFocus"
|
|
|
|
|
- @keyup.native="onInputChange"
|
|
|
|
|
- @mouseenter.native="inputHovering = true"
|
|
|
|
|
- @mouseleave.native="inputHovering = false">
|
|
|
|
|
- <template v-if="$slots.prefix"
|
|
|
|
|
- slot="prefix">
|
|
|
|
|
|
|
+ <el-input
|
|
|
|
|
+ ref="reference"
|
|
|
|
|
+ v-model="selectedLabel"
|
|
|
|
|
+ :disabled="selectDisabled"
|
|
|
|
|
+ :readonly="selectReadonly"
|
|
|
|
|
+ :validate-event="false"
|
|
|
|
|
+ :size="selectSize"
|
|
|
|
|
+ :class="{ 'is-focus': visible }"
|
|
|
|
|
+ :placeholder="currentPlaceholder"
|
|
|
|
|
+ type="text"
|
|
|
|
|
+ @focus="handleFocus"
|
|
|
|
|
+ @keyup.native="onInputChange"
|
|
|
|
|
+ @mouseenter.native="inputHovering = true"
|
|
|
|
|
+ @mouseleave.native="inputHovering = false"
|
|
|
|
|
+ >
|
|
|
|
|
+ <template v-if="$slots.prefix" slot="prefix">
|
|
|
<slot name="prefix" />
|
|
<slot name="prefix" />
|
|
|
</template>
|
|
</template>
|
|
|
- <i slot="suffix"
|
|
|
|
|
- :class="suffixIconClass"
|
|
|
|
|
- @click="handleIconClick" />
|
|
|
|
|
|
|
+ <i
|
|
|
|
|
+ slot="suffix"
|
|
|
|
|
+ :class="suffixIconClass"
|
|
|
|
|
+ @click="handleIconClick"
|
|
|
|
|
+ />
|
|
|
</el-input>
|
|
</el-input>
|
|
|
<transition name="el-zoom-in-top">
|
|
<transition name="el-zoom-in-top">
|
|
|
- <div v-show="visible"
|
|
|
|
|
- ref="popper"
|
|
|
|
|
- :style="{minWidth: inputWidth + 'px'}"
|
|
|
|
|
- class="el-tree-select-dropdown el-popper">
|
|
|
|
|
- <el-scrollbar wrap-class="el-tree-select-dropdown__wrap">
|
|
|
|
|
- <el-tree ref="tree"
|
|
|
|
|
- :data="data"
|
|
|
|
|
- :lazy="lazy"
|
|
|
|
|
- :load="load"
|
|
|
|
|
- :check-on-click-node="checkOnClickNode"
|
|
|
|
|
- :props="treeProps"
|
|
|
|
|
- :show-checkbox="showCheckbox"
|
|
|
|
|
- :expand-on-click-node="false"
|
|
|
|
|
- :check-strictly="checkStrictly"
|
|
|
|
|
- :filter-node-method="filterNodeMethod"
|
|
|
|
|
- :default-checked-keys="checkedKeys"
|
|
|
|
|
- :node-key="nodeKey"
|
|
|
|
|
- :empty-text="emptyText"
|
|
|
|
|
- :current-node-key="currentNodeKey"
|
|
|
|
|
- default-expand-all
|
|
|
|
|
- highlight-current
|
|
|
|
|
- @check="handleCheck"
|
|
|
|
|
- @node-click="handleNodeClick">
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-show="visible"
|
|
|
|
|
+ ref="popper"
|
|
|
|
|
+ :style="{minWidth: inputWidth + 'px'}"
|
|
|
|
|
+ class="el-tree-select-dropdown el-popper"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-scrollbar
|
|
|
|
|
+ wrap-class="el-tree-select-dropdown__wrap"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-tree
|
|
|
|
|
+ ref="tree"
|
|
|
|
|
+ :data="data"
|
|
|
|
|
+ :lazy="lazy"
|
|
|
|
|
+ :load="load"
|
|
|
|
|
+ :check-on-click-node="checkOnClickNode"
|
|
|
|
|
+ :props="treeProps"
|
|
|
|
|
+ :show-checkbox="showCheckbox"
|
|
|
|
|
+ :expand-on-click-node="false"
|
|
|
|
|
+ :check-strictly="checkStrictly"
|
|
|
|
|
+ :filter-node-method="filterNodeMethod"
|
|
|
|
|
+ :default-checked-keys="checkedKeys"
|
|
|
|
|
+ :node-key="nodeKey"
|
|
|
|
|
+ :empty-text="emptyText"
|
|
|
|
|
+ :current-node-key="currentNodeKey"
|
|
|
|
|
+ default-expand-all
|
|
|
|
|
+ highlight-current
|
|
|
|
|
+ @check="handleCheck"
|
|
|
|
|
+ @node-click="handleNodeClick"
|
|
|
|
|
+ >
|
|
|
<template v-slot="scope">
|
|
<template v-slot="scope">
|
|
|
<span class="el-tree-node__label">
|
|
<span class="el-tree-node__label">
|
|
|
- <i v-if="icon"
|
|
|
|
|
- :class="icon(scope.data)" /> {{ scope.node.label }}
|
|
|
|
|
|
|
+ <i v-if="icon" :class="icon(scope.data)" /> {{ scope.node.label }}
|
|
|
</span>
|
|
</span>
|
|
|
</template>
|
|
</template>
|
|
|
</el-tree>
|
|
</el-tree>
|
|
@@ -91,17 +107,20 @@
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!--只读 文本样式-->
|
|
<!--只读 文本样式-->
|
|
|
- <div v-else
|
|
|
|
|
- class="el-tree-select">
|
|
|
|
|
|
|
+ <div v-else class="el-tree-select">
|
|
|
<template v-if="$utils.isNotEmpty(selected)">
|
|
<template v-if="$utils.isNotEmpty(selected)">
|
|
|
- <div v-if="multiple"
|
|
|
|
|
- class="el-tree-select__tags_readonly">
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-if="multiple"
|
|
|
|
|
+ class="el-tree-select__tags_readonly"
|
|
|
|
|
+ >
|
|
|
<template v-for="(item,i) in selected">
|
|
<template v-for="(item,i) in selected">
|
|
|
- <el-tag v-if="$utils.isNotEmpty(item.value)"
|
|
|
|
|
- :key="item.value+i"
|
|
|
|
|
- type="info"
|
|
|
|
|
- disable-transitions
|
|
|
|
|
- class="el-tree-select__tags-text ibps-mr-5 ">
|
|
|
|
|
|
|
+ <el-tag
|
|
|
|
|
+ v-if="$utils.isNotEmpty(item.value)"
|
|
|
|
|
+ :key="item.value+i"
|
|
|
|
|
+ type="info"
|
|
|
|
|
+ disable-transitions
|
|
|
|
|
+ class="el-tree-select__tags-text ibps-mr-5 "
|
|
|
|
|
+ >
|
|
|
<template v-if="displayMode === 'name'">
|
|
<template v-if="displayMode === 'name'">
|
|
|
{{ item.label }}
|
|
{{ item.label }}
|
|
|
</template>
|
|
</template>
|
|
@@ -111,9 +130,11 @@
|
|
|
</el-tag>
|
|
</el-tag>
|
|
|
</template>
|
|
</template>
|
|
|
</div>
|
|
</div>
|
|
|
- <el-tag v-else
|
|
|
|
|
- type="info"
|
|
|
|
|
- disable-transitions>
|
|
|
|
|
|
|
+ <el-tag
|
|
|
|
|
+ v-else
|
|
|
|
|
+ type="info"
|
|
|
|
|
+ disable-transitions
|
|
|
|
|
+ >
|
|
|
{{ selectedLabel }}
|
|
{{ selectedLabel }}
|
|
|
</el-tag>
|
|
</el-tag>
|
|
|
</template>
|
|
</template>
|
|
@@ -226,14 +247,14 @@ export default {
|
|
|
selectMode: { // 选值模式 leaf、any
|
|
selectMode: { // 选值模式 leaf、any
|
|
|
type: String,
|
|
type: String,
|
|
|
default: 'any',
|
|
default: 'any',
|
|
|
- validator: function (value) {
|
|
|
|
|
|
|
+ validator: function(value) {
|
|
|
return ['any', 'leaf'].indexOf(value) !== -1
|
|
return ['any', 'leaf'].indexOf(value) !== -1
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
displayMode: { // 显示模式 path 、name
|
|
displayMode: { // 显示模式 path 、name
|
|
|
type: String,
|
|
type: String,
|
|
|
default: 'name',
|
|
default: 'name',
|
|
|
- validator: function (value) {
|
|
|
|
|
|
|
+ validator: function(value) {
|
|
|
return ['name', 'path'].indexOf(value) !== -1
|
|
return ['name', 'path'].indexOf(value) !== -1
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
@@ -283,12 +304,12 @@ export default {
|
|
|
suffixIconClass() {
|
|
suffixIconClass() {
|
|
|
let classes = ['el-tree-select__caret', 'el-input__icon']
|
|
let classes = ['el-tree-select__caret', 'el-input__icon']
|
|
|
const criteria = this.clearable &&
|
|
const criteria = this.clearable &&
|
|
|
- !this.selectDisabled &&
|
|
|
|
|
- this.inputHovering &&
|
|
|
|
|
- !this.multiple &&
|
|
|
|
|
- this.value !== undefined &&
|
|
|
|
|
- this.value !== null &&
|
|
|
|
|
- this.value !== ''
|
|
|
|
|
|
|
+ !this.selectDisabled &&
|
|
|
|
|
+ this.inputHovering &&
|
|
|
|
|
+ !this.multiple &&
|
|
|
|
|
+ this.value !== undefined &&
|
|
|
|
|
+ this.value !== null &&
|
|
|
|
|
+ this.value !== ''
|
|
|
if (criteria) {
|
|
if (criteria) {
|
|
|
classes = [...classes, 'el-icon-circle-close', 'is-show-close']
|
|
classes = [...classes, 'el-icon-circle-close', 'is-show-close']
|
|
|
} else {
|
|
} else {
|
|
@@ -523,7 +544,6 @@ export default {
|
|
|
},
|
|
},
|
|
|
getNodeData(value) {
|
|
getNodeData(value) {
|
|
|
let node = null
|
|
let node = null
|
|
|
- console.log('value',value)
|
|
|
|
|
if (Array.isArray(this.data)) {
|
|
if (Array.isArray(this.data)) {
|
|
|
const traverse = (arr, lablePrefix = []) => {
|
|
const traverse = (arr, lablePrefix = []) => {
|
|
|
for (let i = 0; i < arr.length; i++) {
|
|
for (let i = 0; i < arr.length; i++) {
|
|
@@ -651,5 +671,5 @@ export default {
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
|
-@import "~@/assets/styles/components/tree-select.scss";
|
|
|
|
|
|
|
+@import '~@/assets/styles/components/tree-select.scss'
|
|
|
</style>
|
|
</style>
|