|
|
@@ -1,144 +1,144 @@
|
|
|
<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"
|
|
|
+ v-if="editable"
|
|
|
+ v-clickoutside="handleClose"
|
|
|
+ class="el-tree-select"
|
|
|
+ @click="toggleTree"
|
|
|
>
|
|
|
- <transition-group @after-leave="resetInputHeight">
|
|
|
- <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)"
|
|
|
- >
|
|
|
- <span class="el-tree-select__tags-text">{{ displayMode==="name"? item.label:item.path }}</span>
|
|
|
- </el-tag>
|
|
|
- </template>
|
|
|
- </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)"
|
|
|
- >
|
|
|
- </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">
|
|
|
- <slot name="prefix" />
|
|
|
- </template>
|
|
|
- <i
|
|
|
- slot="suffix"
|
|
|
- :class="suffixIconClass"
|
|
|
- @click="handleIconClick"
|
|
|
- />
|
|
|
- </el-input>
|
|
|
- <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"
|
|
|
+ <div
|
|
|
+ v-if="multiple"
|
|
|
+ ref="tags"
|
|
|
+ :style="{ 'max-width': inputWidth - 32 + 'px' }"
|
|
|
+ class="el-tree-select__tags"
|
|
|
+ >
|
|
|
+ <transition-group @after-leave="resetInputHeight">
|
|
|
+ <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)"
|
|
|
+ >
|
|
|
+ <span class="el-tree-select__tags-text">{{ displayMode==="name"? item.label:item.path }}</span>
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </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)"
|
|
|
+ >
|
|
|
+ </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"
|
|
|
>
|
|
|
- <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">
|
|
|
- <span class="el-tree-node__label">
|
|
|
- <i v-if="icon" :class="icon(scope.data)" /> {{ scope.node.label }}
|
|
|
- </span>
|
|
|
+ <template v-if="$slots.prefix" slot="prefix">
|
|
|
+ <slot name="prefix" />
|
|
|
</template>
|
|
|
- </el-tree>
|
|
|
- </el-scrollbar>
|
|
|
- </div>
|
|
|
- </transition>
|
|
|
- </div>
|
|
|
+ <i
|
|
|
+ slot="suffix"
|
|
|
+ :class="suffixIconClass"
|
|
|
+ @click="handleIconClick"
|
|
|
+ />
|
|
|
+ </el-input>
|
|
|
+ <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"
|
|
|
+ >
|
|
|
+ <template v-slot="scope">
|
|
|
+ <span class="el-tree-node__label">
|
|
|
+ <i v-if="icon" :class="icon(scope.data)" /> {{ scope.node.label }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+ </div>
|
|
|
|
|
|
- <!--只读 文本样式-->
|
|
|
- <div v-else class="el-tree-select">
|
|
|
- <template v-if="$utils.isNotEmpty(selected)">
|
|
|
- <div
|
|
|
- v-if="multiple"
|
|
|
- class="el-tree-select__tags_readonly"
|
|
|
- >
|
|
|
- <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 "
|
|
|
- >
|
|
|
- <template v-if="displayMode === 'name'">
|
|
|
- {{ item.label }}
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- {{ item.path }}
|
|
|
- </template>
|
|
|
- </el-tag>
|
|
|
+ <!--只读 文本样式-->
|
|
|
+ <div v-else class="el-tree-select">
|
|
|
+ <template v-if="$utils.isNotEmpty(selected)">
|
|
|
+ <div
|
|
|
+ v-if="multiple"
|
|
|
+ class="el-tree-select__tags_readonly"
|
|
|
+ >
|
|
|
+ <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 "
|
|
|
+ >
|
|
|
+ <template v-if="displayMode === 'name'">
|
|
|
+ {{ item.label }}
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ {{ item.path }}
|
|
|
+ </template>
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <el-tag
|
|
|
+ v-else
|
|
|
+ type="info"
|
|
|
+ disable-transitions
|
|
|
+ >
|
|
|
+ {{ selectedLabel }}
|
|
|
+ </el-tag>
|
|
|
</template>
|
|
|
- </div>
|
|
|
- <el-tag
|
|
|
- v-else
|
|
|
- type="info"
|
|
|
- disable-transitions
|
|
|
- >
|
|
|
- {{ selectedLabel }}
|
|
|
- </el-tag>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -157,517 +157,517 @@ import PopupManager from '@/utils/popup'
|
|
|
|
|
|
// TODO: 等 vue-popper 合并后，这里还需要做出调整
|
|
|
const popperMixin = {
|
|
|
- props: {
|
|
|
- placement: {
|
|
|
- type: String,
|
|
|
- default: 'bottom-start'
|
|
|
+ props: {
|
|
|
+ placement: {
|
|
|
+ type: String,
|
|
|
+ default: 'bottom-start'
|
|
|
+ },
|
|
|
+ appendToBody: false,
|
|
|
+ arrowOffset: Popper.props.arrowOffset,
|
|
|
+ offset: Popper.props.offset,
|
|
|
+ boundariesPadding: Popper.props.boundariesPadding,
|
|
|
+ popperOptions: Popper.props.popperOptions,
|
|
|
+ visibleArrow: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ }
|
|
|
},
|
|
|
- appendToBody: false,
|
|
|
- arrowOffset: Popper.props.arrowOffset,
|
|
|
- offset: Popper.props.offset,
|
|
|
- boundariesPadding: Popper.props.boundariesPadding,
|
|
|
- popperOptions: Popper.props.popperOptions,
|
|
|
- visibleArrow: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- }
|
|
|
- },
|
|
|
- methods: Popper.methods,
|
|
|
- data: Popper.data,
|
|
|
- beforeDestroy: Popper.beforeDestroy
|
|
|
+ methods: Popper.methods,
|
|
|
+ data: Popper.data,
|
|
|
+ beforeDestroy: Popper.beforeDestroy
|
|
|
}
|
|
|
const sizeMap = {
|
|
|
- 'medium': 36,
|
|
|
- 'small': 32,
|
|
|
- 'mini': 28
|
|
|
+ 'medium': 36,
|
|
|
+ 'small': 32,
|
|
|
+ 'mini': 28
|
|
|
}
|
|
|
|
|
|
export default {
|
|
|
- name: 'ibps-tree-select',
|
|
|
- // components: {
|
|
|
- // ElInput,
|
|
|
- // ElTree
|
|
|
- // },
|
|
|
- directives: { Clickoutside },
|
|
|
- mixins: [popperMixin, emitter],
|
|
|
- provide() {
|
|
|
- return {
|
|
|
- elTreeSelect: this
|
|
|
- }
|
|
|
- },
|
|
|
- inject: {
|
|
|
- elForm: {
|
|
|
- default: ''
|
|
|
- },
|
|
|
- elFormItem: {
|
|
|
- default: ''
|
|
|
- }
|
|
|
- },
|
|
|
- props: {
|
|
|
- data: {
|
|
|
- type: Array,
|
|
|
- required: true
|
|
|
- },
|
|
|
- value: {
|
|
|
- type: [String, Number, Array, Object],
|
|
|
- default: ''
|
|
|
- },
|
|
|
- multiple: Boolean,
|
|
|
- disabled: Boolean,
|
|
|
- readonly: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- readonlyText: { // 只读样式 【text ,original】
|
|
|
- type: String,
|
|
|
- default: 'original',
|
|
|
- validator(val) {
|
|
|
- return ['original', 'text'].indexOf(val) > -1
|
|
|
- }
|
|
|
- },
|
|
|
- clearable: Boolean,
|
|
|
- size: {
|
|
|
- type: String,
|
|
|
- validator(val) {
|
|
|
- return ['medium', 'small', 'mini'].indexOf(val) > -1
|
|
|
- }
|
|
|
+ name: 'ibps-tree-select',
|
|
|
+ // components: {
|
|
|
+ // ElInput,
|
|
|
+ // ElTree
|
|
|
+ // },
|
|
|
+ directives: { Clickoutside },
|
|
|
+ mixins: [popperMixin, emitter],
|
|
|
+ provide () {
|
|
|
+ return {
|
|
|
+ elTreeSelect: this
|
|
|
+ }
|
|
|
},
|
|
|
- nodeKey: {
|
|
|
- type: String,
|
|
|
- default: 'id'
|
|
|
+ inject: {
|
|
|
+ elForm: {
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ elFormItem: {
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
},
|
|
|
+ props: {
|
|
|
+ data: {
|
|
|
+ type: Array,
|
|
|
+ required: true
|
|
|
+ },
|
|
|
+ value: {
|
|
|
+ type: [String, Number, Array, Object],
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ multiple: Boolean,
|
|
|
+ disabled: Boolean,
|
|
|
+ readonly: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ readonlyText: { // 只读样式 【text ,original】
|
|
|
+ type: String,
|
|
|
+ default: 'original',
|
|
|
+ validator (val) {
|
|
|
+ return ['original', 'text'].indexOf(val) > -1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clearable: Boolean,
|
|
|
+ size: {
|
|
|
+ type: String,
|
|
|
+ validator (val) {
|
|
|
+ return ['medium', 'small', 'mini'].indexOf(val) > -1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ nodeKey: {
|
|
|
+ type: String,
|
|
|
+ default: 'id'
|
|
|
+ },
|
|
|
|
|
|
- props: Object,
|
|
|
- placeholder: {
|
|
|
- type: String,
|
|
|
- default() {
|
|
|
- return '请选择'
|
|
|
- }
|
|
|
- },
|
|
|
- selectMode: { // 选值模式 leaf、any
|
|
|
- type: String,
|
|
|
- default: 'any',
|
|
|
- validator: function(value) {
|
|
|
- return ['any', 'leaf'].indexOf(value) !== -1
|
|
|
- }
|
|
|
- },
|
|
|
- displayMode: { // 显示模式 path 、name
|
|
|
- type: String,
|
|
|
- default: 'name',
|
|
|
- validator: function(value) {
|
|
|
- return ['name', 'path'].indexOf(value) !== -1
|
|
|
- }
|
|
|
- },
|
|
|
- separator: { // 树形选项分隔符
|
|
|
- type: String,
|
|
|
- default: '/'
|
|
|
- },
|
|
|
- warningText: {
|
|
|
- type: String,
|
|
|
- default: '请选择叶子节点'
|
|
|
- },
|
|
|
- allowSelection: Function, // 允许的节点
|
|
|
- lazy: Boolean,
|
|
|
- load: Function,
|
|
|
- showCheckbox: Boolean,
|
|
|
- checkStrictly: Boolean,
|
|
|
- filterable: Boolean,
|
|
|
- filterMethod: Function,
|
|
|
- emptyText: String,
|
|
|
- showCheckedStrategy: { // 显示多选按钮
|
|
|
- type: String,
|
|
|
- default: 'child',
|
|
|
- validator(val) {
|
|
|
- return ['all', 'parent', 'child'].indexOf(val) > -1
|
|
|
- }
|
|
|
+ props: Object,
|
|
|
+ placeholder: {
|
|
|
+ type: String,
|
|
|
+ default () {
|
|
|
+ return '请选择'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectMode: { // 选值模式 leaf、any
|
|
|
+ type: String,
|
|
|
+ default: 'any',
|
|
|
+ validator: function (value) {
|
|
|
+ return ['any', 'leaf'].indexOf(value) !== -1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ displayMode: { // 显示模式 path 、name
|
|
|
+ type: String,
|
|
|
+ default: 'name',
|
|
|
+ validator: function (value) {
|
|
|
+ return ['name', 'path'].indexOf(value) !== -1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ separator: { // 树形选项分隔符
|
|
|
+ type: String,
|
|
|
+ default: '/'
|
|
|
+ },
|
|
|
+ warningText: {
|
|
|
+ type: String,
|
|
|
+ default: '请选择叶子节点'
|
|
|
+ },
|
|
|
+ allowSelection: Function, // 允许的节点
|
|
|
+ lazy: Boolean,
|
|
|
+ load: Function,
|
|
|
+ showCheckbox: Boolean,
|
|
|
+ checkStrictly: Boolean,
|
|
|
+ filterable: Boolean,
|
|
|
+ filterMethod: Function,
|
|
|
+ emptyText: String,
|
|
|
+ showCheckedStrategy: { // 显示多选按钮
|
|
|
+ type: String,
|
|
|
+ default: 'child',
|
|
|
+ validator (val) {
|
|
|
+ return ['all', 'parent', 'child'].indexOf(val) > -1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ icon: Function
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ query: '',
|
|
|
+ selectedLabel: '',
|
|
|
+ inputLength: 0,
|
|
|
+ visible: false,
|
|
|
+ inputWidth: 0,
|
|
|
+ inputHovering: false,
|
|
|
+ treeVisibleOnFocus: false,
|
|
|
+ selected: this.multiple ? [] : {},
|
|
|
+ checkOnClickNode: false,
|
|
|
+ treeProps: {
|
|
|
+ label: 'name',
|
|
|
+ children: 'children'
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- icon: Function
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- query: '',
|
|
|
- selectedLabel: '',
|
|
|
- inputLength: 0,
|
|
|
- visible: false,
|
|
|
- inputWidth: 0,
|
|
|
- inputHovering: false,
|
|
|
- treeVisibleOnFocus: false,
|
|
|
- selected: this.multiple ? [] : {},
|
|
|
- checkOnClickNode: false,
|
|
|
- treeProps: {
|
|
|
- label: 'name',
|
|
|
- children: 'children'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- suffixIconClass() {
|
|
|
- let classes = ['el-tree-select__caret', 'el-input__icon']
|
|
|
- const criteria = this.clearable &&
|
|
|
+ computed: {
|
|
|
+ suffixIconClass () {
|
|
|
+ let classes = ['el-tree-select__caret', 'el-input__icon']
|
|
|
+ const criteria = this.clearable &&
|
|
|
!this.selectDisabled &&
|
|
|
this.inputHovering &&
|
|
|
!this.multiple &&
|
|
|
this.value !== undefined &&
|
|
|
this.value !== null &&
|
|
|
this.value !== ''
|
|
|
- if (criteria) {
|
|
|
- classes = [...classes, 'el-icon-circle-close', 'is-show-close']
|
|
|
- } else {
|
|
|
- classes.push('el-icon-arrow-down')
|
|
|
- if (this.visible) {
|
|
|
- classes.push('is-reverse')
|
|
|
+ if (criteria) {
|
|
|
+ classes = [...classes, 'el-icon-circle-close', 'is-show-close']
|
|
|
+ } else {
|
|
|
+ classes.push('el-icon-arrow-down')
|
|
|
+ if (this.visible) {
|
|
|
+ classes.push('is-reverse')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return classes
|
|
|
+ },
|
|
|
+ selectDisabled () {
|
|
|
+ return this.disabled || (this.elForm || {}).disabled
|
|
|
+ },
|
|
|
+ selectSize () {
|
|
|
+ return this.size || (this.elFormItem || {}).elFormItemSize || (this.$ELEMENT || {}).size
|
|
|
+ },
|
|
|
+ collapseTagSize () {
|
|
|
+ return ['small', 'mini'].indexOf(this.selectSize) > -1
|
|
|
+ ? 'mini'
|
|
|
+ : 'small'
|
|
|
+ },
|
|
|
+ editable () {
|
|
|
+ return !this.readonly || (this.readonly && this.readonlyText === 'original')
|
|
|
+ },
|
|
|
+ selectReadonly () {
|
|
|
+ const isIE = !this.$isServer && !isNaN(Number(document.documentMode))
|
|
|
+ return this.readonly || !this.filterable || this.multiple || (!isIE && !this.visible)
|
|
|
+ },
|
|
|
+ checkedKeys () {
|
|
|
+ if (this.multiple && this.showCheckbox) {
|
|
|
+ return this.value || []
|
|
|
+ } else {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ currentNodeKey () {
|
|
|
+ if (this.multiple) {
|
|
|
+ return this.value && this.value.length > 0 ? this.value[0].value : ''
|
|
|
+ } else {
|
|
|
+ if (this.value && Array.isArray(this.value)) {
|
|
|
+ return this.value[0] || ''
|
|
|
+ } else {
|
|
|
+ return this.value || ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ currentPlaceholder () {
|
|
|
+ if (this.$utils.isEmpty(this.value)) {
|
|
|
+ return this.placeholder
|
|
|
+ } else {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelKey () {
|
|
|
+ return this.treeProps['label'] || 'name'
|
|
|
}
|
|
|
- }
|
|
|
- return classes
|
|
|
- },
|
|
|
- selectDisabled() {
|
|
|
- return this.disabled || (this.elForm || {}).disabled
|
|
|
- },
|
|
|
- selectSize() {
|
|
|
- return this.size || (this.elFormItem || {}).elFormItemSize || (this.$ELEMENT || {}).size
|
|
|
- },
|
|
|
- collapseTagSize() {
|
|
|
- return ['small', 'mini'].indexOf(this.selectSize) > -1
|
|
|
- ? 'mini'
|
|
|
- : 'small'
|
|
|
- },
|
|
|
- editable() {
|
|
|
- return !this.readonly || (this.readonly && this.readonlyText === 'original')
|
|
|
- },
|
|
|
- selectReadonly() {
|
|
|
- const isIE = !this.$isServer && !isNaN(Number(document.documentMode))
|
|
|
- return this.readonly || !this.filterable || this.multiple || (!isIE && !this.visible)
|
|
|
},
|
|
|
- checkedKeys() {
|
|
|
- if (this.multiple && this.showCheckbox) {
|
|
|
- return this.value || []
|
|
|
- } else {
|
|
|
- return []
|
|
|
- }
|
|
|
- },
|
|
|
- currentNodeKey() {
|
|
|
- if (this.multiple) {
|
|
|
- return this.value && this.value.length > 0 ? this.value[0].value : ''
|
|
|
- } else {
|
|
|
- if (this.value && Array.isArray(this.value)) {
|
|
|
- return this.value[0] || ''
|
|
|
- } else {
|
|
|
- return this.value || ''
|
|
|
+ watch: {
|
|
|
+ visible (val) {
|
|
|
+ if (val) {
|
|
|
+ this.updatePopper()
|
|
|
+ if (this.multiple && this.filterable) {
|
|
|
+ this.$refs.input && this.$refs.input.focus()
|
|
|
+ }
|
|
|
+ this.$emit('focus', this)
|
|
|
+ if (!this.multiple && this.filterable) {
|
|
|
+ this.broadcast('ElInput', 'inputSelect')
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.destroyPopper()
|
|
|
+ this.$refs.input && this.$refs.input.blur()
|
|
|
+ this.$emit('blur', this)
|
|
|
+ if (!this.multiple) {
|
|
|
+ this.setSelected()
|
|
|
+ }
|
|
|
+ if (this.filterable) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.handleQueryChange('')
|
|
|
+ }, 100)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ value (val, oldVal) {
|
|
|
+ if (this.multiple) {
|
|
|
+ this.resetInputHeight()
|
|
|
+ }
|
|
|
+ this.setSelected()
|
|
|
+ if (!valueEquals(val, oldVal)) {
|
|
|
+ this.dispatch('ElFormItem', 'el.form.change', val)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ this.setSelected()
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ handler (val, oldVal) {
|
|
|
+ this.treeProps = val
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- currentPlaceholder() {
|
|
|
- if (this.$utils.isEmpty(this.value)) {
|
|
|
- return this.placeholder
|
|
|
- } else {
|
|
|
- return ''
|
|
|
- }
|
|
|
},
|
|
|
- labelKey() {
|
|
|
- return this.treeProps['label'] || 'name'
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- visible(val) {
|
|
|
- if (val) {
|
|
|
- this.updatePopper()
|
|
|
- if (this.multiple && this.filterable) {
|
|
|
- this.$refs.input && this.$refs.input.focus()
|
|
|
+ mounted () {
|
|
|
+ if (this.multiple && this.showCheckbox) {
|
|
|
+ this.checkOnClickNode = true
|
|
|
}
|
|
|
- this.$emit('focus', this)
|
|
|
- if (!this.multiple && this.filterable) {
|
|
|
- this.broadcast('ElInput', 'inputSelect')
|
|
|
+ if (this.editable) {
|
|
|
+ this.referenceElm = this.$refs.reference.$el
|
|
|
+ this.popperElm = this.$refs.popper
|
|
|
+ this.inputWidth = this.$refs.reference.$el.getBoundingClientRect().width
|
|
|
+ addResizeListener(this.$el, this.handleResize)
|
|
|
+ this.setSelected()
|
|
|
+ this.fixZIndex()
|
|
|
}
|
|
|
- } else {
|
|
|
- this.destroyPopper()
|
|
|
- this.$refs.input && this.$refs.input.blur()
|
|
|
- this.$emit('blur', this)
|
|
|
- if (!this.multiple) {
|
|
|
- this.setSelected()
|
|
|
- }
|
|
|
- if (this.filterable) {
|
|
|
- setTimeout(() => {
|
|
|
- this.handleQueryChange('')
|
|
|
- }, 100)
|
|
|
- }
|
|
|
- }
|
|
|
},
|
|
|
- value(val, oldVal) {
|
|
|
- if (this.multiple) {
|
|
|
- this.resetInputHeight()
|
|
|
- }
|
|
|
- this.setSelected()
|
|
|
- if (!valueEquals(val, oldVal)) {
|
|
|
- this.dispatch('ElFormItem', 'el.form.change', val)
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- this.setSelected()
|
|
|
+ beforeDestroy () {
|
|
|
+ if (this.editable) {
|
|
|
+ removeResizeListener(this.$el, this.handleResize)
|
|
|
+ }
|
|
|
},
|
|
|
- props: {
|
|
|
- handler(val, oldVal) {
|
|
|
- this.treeProps = val
|
|
|
- },
|
|
|
- deep: true,
|
|
|
- immediate: true
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- if (this.multiple && this.showCheckbox) {
|
|
|
- this.checkOnClickNode = true
|
|
|
- }
|
|
|
- if (this.editable) {
|
|
|
- this.referenceElm = this.$refs.reference.$el
|
|
|
- this.popperElm = this.$refs.popper
|
|
|
- this.inputWidth = this.$refs.reference.$el.getBoundingClientRect().width
|
|
|
- addResizeListener(this.$el, this.handleResize)
|
|
|
- this.setSelected()
|
|
|
- this.fixZIndex()
|
|
|
- }
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- if (this.editable) {
|
|
|
- removeResizeListener(this.$el, this.handleResize)
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
+ methods: {
|
|
|
/**
|
|
|
* zxh 修复zindex 不是最高的被遮住
|
|
|
*/
|
|
|
- fixZIndex() {
|
|
|
- PopupManager.getZIndex()
|
|
|
- },
|
|
|
- handleFocus(event) {
|
|
|
- this.treeVisibleOnFocus = true
|
|
|
- this.visible = true
|
|
|
- this.$emit('focus', event)
|
|
|
- },
|
|
|
- handleClose() {
|
|
|
- this.visible = false
|
|
|
- },
|
|
|
- toggleTree() {
|
|
|
- if (this.selectDisabled) return
|
|
|
- if (this.treeVisibleOnFocus) {
|
|
|
- this.treeVisibleOnFocus = false
|
|
|
- } else {
|
|
|
- this.visible = !this.visible
|
|
|
- }
|
|
|
- },
|
|
|
- handleIconClick(event) {
|
|
|
- if (this.suffixIconClass.indexOf('el-icon-circle-close') > -1) {
|
|
|
- event.stopPropagation()
|
|
|
- this.visible = false
|
|
|
- this.$emit('input', '')
|
|
|
- this.emitChange('')
|
|
|
- this.$emit('clear')
|
|
|
- this.selected = {}
|
|
|
- this.selectedLabel = ''
|
|
|
- }
|
|
|
- },
|
|
|
- emitChange(val) {
|
|
|
- if (!valueEquals(this.value, val)) {
|
|
|
- this.$emit('change', val, this.getNodeData(val))
|
|
|
- }
|
|
|
- },
|
|
|
- handleQueryChange(val) {
|
|
|
- this.$refs.tree && this.$refs.tree.filter(val)
|
|
|
- },
|
|
|
- handleNodeClick(data, node, tree) {
|
|
|
- if (this.showCheckbox) return
|
|
|
- if (typeof this.allowSelection === 'function' && !this.allowSelection(data, node, tree)) {
|
|
|
- return false
|
|
|
- }
|
|
|
- if ((this.selectMode === 'leaf' && !node.isLeaf) || (this.selectMode === 'leaf' && node.data.isLeaf === false)) {
|
|
|
- this.$message.warning(this.warningText)
|
|
|
- return false
|
|
|
- }
|
|
|
- this.setSelectedNode(data, node, tree)
|
|
|
- },
|
|
|
- setSelectedNode(data, node, tree) {
|
|
|
- const value = data[this.nodeKey]
|
|
|
- if (this.multiple) {
|
|
|
- const valueCopy = this.value.slice()
|
|
|
- const index = this.getValueIndex(valueCopy, value)
|
|
|
- if (index > -1) {
|
|
|
- valueCopy.splice(index, 1)
|
|
|
- } else {
|
|
|
- valueCopy.push(value)
|
|
|
- }
|
|
|
- this.$refs.input && this.$refs.input.focus()
|
|
|
- this.$emit('input', valueCopy)
|
|
|
- this.emitChange(valueCopy)
|
|
|
- } else {
|
|
|
- // if (value === this.value) {
|
|
|
- // value = ''
|
|
|
- // }
|
|
|
- this.$emit('input', value)
|
|
|
- this.emitChange(value)
|
|
|
- this.visible = false
|
|
|
- }
|
|
|
- },
|
|
|
- handleCheck(data, info) {
|
|
|
- const { checkedNodes } = info
|
|
|
- let nodes = []
|
|
|
- switch (this.showCheckedStrategy) {
|
|
|
- case 'parent':
|
|
|
- nodes = this.getTreeCheckedParentNodes()
|
|
|
- break
|
|
|
- case 'child':
|
|
|
- nodes = checkedNodes.filter(({ children }) => !(children && children.length))
|
|
|
- break
|
|
|
- default:
|
|
|
- nodes = checkedNodes
|
|
|
- break
|
|
|
- }
|
|
|
- const values = nodes.map((node) => node[this.nodeKey])
|
|
|
- if (this.filterable) this.$refs.input && this.$refs.input.focus()
|
|
|
- this.$emit('input', values)
|
|
|
- this.emitChange(values)
|
|
|
- },
|
|
|
- getTreeCheckedParentNodes() {
|
|
|
- const checkedNodes = []
|
|
|
- const traverse = (node) => {
|
|
|
- const childNodes = node.root ? node.root.childNodes : node.childNodes
|
|
|
- childNodes.forEach(child => {
|
|
|
- if (child.checked && !child.isLeaf) {
|
|
|
- checkedNodes.push({
|
|
|
- label: child.data.label,
|
|
|
- value: child.data.value
|
|
|
+ fixZIndex () {
|
|
|
+ PopupManager.getZIndex()
|
|
|
+ },
|
|
|
+ handleFocus (event) {
|
|
|
+ this.treeVisibleOnFocus = true
|
|
|
+ this.visible = true
|
|
|
+ this.$emit('focus', event)
|
|
|
+ },
|
|
|
+ handleClose () {
|
|
|
+ this.visible = false
|
|
|
+ },
|
|
|
+ toggleTree () {
|
|
|
+ if (this.selectDisabled) return
|
|
|
+ if (this.treeVisibleOnFocus) {
|
|
|
+ this.treeVisibleOnFocus = false
|
|
|
+ } else {
|
|
|
+ this.visible = !this.visible
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleIconClick (event) {
|
|
|
+ if (this.suffixIconClass.indexOf('el-icon-circle-close') > -1) {
|
|
|
+ event.stopPropagation()
|
|
|
+ this.visible = false
|
|
|
+ this.$emit('input', '')
|
|
|
+ this.emitChange('')
|
|
|
+ this.$emit('clear')
|
|
|
+ this.selected = {}
|
|
|
+ this.selectedLabel = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emitChange (val) {
|
|
|
+ if (!valueEquals(this.value, val)) {
|
|
|
+ this.$emit('change', val, this.getNodeData(val))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleQueryChange (val) {
|
|
|
+ this.$refs.tree && this.$refs.tree.filter(val)
|
|
|
+ },
|
|
|
+ handleNodeClick (data, node, tree) {
|
|
|
+ if (this.showCheckbox) return
|
|
|
+ if (typeof this.allowSelection === 'function' && !this.allowSelection(data, node, tree)) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if ((this.selectMode === 'leaf' && !node.isLeaf) || (this.selectMode === 'leaf' && node.data.isLeaf === false)) {
|
|
|
+ this.$message.warning(this.warningText)
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.setSelectedNode(data, node, tree)
|
|
|
+ },
|
|
|
+ setSelectedNode (data, node, tree) {
|
|
|
+ const value = data[this.nodeKey]
|
|
|
+ if (this.multiple) {
|
|
|
+ const valueCopy = this.value.slice()
|
|
|
+ const index = this.getValueIndex(valueCopy, value)
|
|
|
+ if (index > -1) {
|
|
|
+ valueCopy.splice(index, 1)
|
|
|
+ } else {
|
|
|
+ valueCopy.push(value)
|
|
|
+ }
|
|
|
+ this.$refs.input && this.$refs.input.focus()
|
|
|
+ this.$emit('input', valueCopy)
|
|
|
+ this.emitChange(valueCopy)
|
|
|
+ } else {
|
|
|
+ // if (value === this.value) {
|
|
|
+ // value = ''
|
|
|
+ // }
|
|
|
+ this.$emit('input', value)
|
|
|
+ this.emitChange(value)
|
|
|
+ this.visible = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleCheck (data, info) {
|
|
|
+ const { checkedNodes } = info
|
|
|
+ let nodes = []
|
|
|
+ switch (this.showCheckedStrategy) {
|
|
|
+ case 'parent':
|
|
|
+ nodes = this.getTreeCheckedParentNodes()
|
|
|
+ break
|
|
|
+ case 'child':
|
|
|
+ nodes = checkedNodes.filter(({ children }) => !(children && children.length))
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ nodes = checkedNodes
|
|
|
+ break
|
|
|
+ }
|
|
|
+ const values = nodes.map((node) => node[this.nodeKey])
|
|
|
+ if (this.filterable) this.$refs.input && this.$refs.input.focus()
|
|
|
+ this.$emit('input', values)
|
|
|
+ this.emitChange(values)
|
|
|
+ },
|
|
|
+ getTreeCheckedParentNodes () {
|
|
|
+ const checkedNodes = []
|
|
|
+ const traverse = (node) => {
|
|
|
+ const childNodes = node.root ? node.root.childNodes : node.childNodes
|
|
|
+ childNodes.forEach(child => {
|
|
|
+ if (child.checked && !child.isLeaf) {
|
|
|
+ checkedNodes.push({
|
|
|
+ label: child.data.label,
|
|
|
+ value: child.data.value
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ traverse(child)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ traverse(this.$refs.tree.store)
|
|
|
+ return checkedNodes
|
|
|
+ },
|
|
|
+ getNodeData (value) {
|
|
|
+ let node = null
|
|
|
+ if (Array.isArray(this.data)) {
|
|
|
+ const traverse = (arr, lablePrefix = []) => {
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
+ const child = arr[i]
|
|
|
+ let labelData = child[this.labelKey]
|
|
|
+ if (typeof this.labelKey !== 'string') {
|
|
|
+ labelData = this.labelKey(child)
|
|
|
+ }
|
|
|
+ if (child[this.nodeKey] === value) {
|
|
|
+ node = {
|
|
|
+ label: labelData,
|
|
|
+ value: child[this.nodeKey],
|
|
|
+ path: [...lablePrefix, labelData].join(this.separator),
|
|
|
+ data: child
|
|
|
+ }
|
|
|
+ break
|
|
|
+ } else if (child.children && child.children.length > 0) {
|
|
|
+ traverse(child.children, [...lablePrefix, labelData])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ traverse(this.data)
|
|
|
+ }
|
|
|
+ return node
|
|
|
+ },
|
|
|
+ onInputChange () {
|
|
|
+ if (this.filterable && this.query !== this.selectedLabel) {
|
|
|
+ this.query = this.selectedLabel
|
|
|
+ this.handleQueryChange(this.query)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filterNodeMethod (value, data) {
|
|
|
+ if (!value) return true
|
|
|
+ this.$nextTick(this.updatePopper)
|
|
|
+ if (typeof this.filterMethod === 'function') {
|
|
|
+ return this.filterMethod(value, data)
|
|
|
+ } else {
|
|
|
+ if (data[this.labelKey]) {
|
|
|
+ return data[this.labelKey].indexOf(value) !== -1
|
|
|
+ } else {
|
|
|
+ if (data.label) {
|
|
|
+ return data.label.indexOf(value) !== -1
|
|
|
+ } else {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ resetInputHeight () {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (!this.$refs.reference || !this.$refs.tags) return
|
|
|
+ const inputEl = this.$refs.reference.$refs.input
|
|
|
+ const tags = this.$refs.tags
|
|
|
+ let height = sizeMap[this.selectSize] || 40
|
|
|
+ if (this.selected.length !== 0) {
|
|
|
+ height = Math.max((tags.clientHeight + (tags.clientHeight > height ? 6 : 0)), height)
|
|
|
+ }
|
|
|
+ inputEl.style.height = `${height}px`
|
|
|
+ if (this.visible) {
|
|
|
+ this.updatePopper()
|
|
|
+ }
|
|
|
})
|
|
|
- } else {
|
|
|
- traverse(child)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- traverse(this.$refs.tree.store)
|
|
|
- return checkedNodes
|
|
|
- },
|
|
|
- getNodeData(value) {
|
|
|
- let node = null
|
|
|
- if (Array.isArray(this.data)) {
|
|
|
- const traverse = (arr, lablePrefix = []) => {
|
|
|
- for (let i = 0; i < arr.length; i++) {
|
|
|
- const child = arr[i]
|
|
|
- let labelData = child[this.labelKey]
|
|
|
- if (typeof this.labelKey !== 'string') {
|
|
|
- labelData = this.labelKey(child)
|
|
|
+ },
|
|
|
+ getValueIndex (arr = [], value) {
|
|
|
+ let index = -1
|
|
|
+ arr.some((item, i) => {
|
|
|
+ if (item === value) {
|
|
|
+ index = i
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return index
|
|
|
+ },
|
|
|
+ deletePrevTag (e) {
|
|
|
+ if (e.target.value.length <= 0) {
|
|
|
+ this.selected.splice(-1, 1)
|
|
|
+ const values = this.selected.map(({ value }) => value)
|
|
|
+ this.$emit('input', values)
|
|
|
+ this.emitChange(values)
|
|
|
}
|
|
|
- if (child[this.nodeKey] === value) {
|
|
|
- node = {
|
|
|
- label: labelData,
|
|
|
- value: child[this.nodeKey],
|
|
|
- path: [...lablePrefix, labelData].join(this.separator),
|
|
|
- data: child
|
|
|
- }
|
|
|
- break
|
|
|
- } else if (child.children && child.children.length > 0) {
|
|
|
- traverse(child.children, [...lablePrefix, labelData])
|
|
|
+ },
|
|
|
+ deleteTag (item) {
|
|
|
+ this.selected = this.selected.filter(selectItem => selectItem !== item)
|
|
|
+ const values = this.selected.map(({ value }) => value)
|
|
|
+ this.$emit('input', values)
|
|
|
+ this.emitChange(values)
|
|
|
+ },
|
|
|
+ resetInputWidth () {
|
|
|
+ this.inputWidth = this.$refs.reference && this.$refs.reference ? this.$refs.reference.$el.getBoundingClientRect().width : 0
|
|
|
+ },
|
|
|
+ handleResize () {
|
|
|
+ this.resetInputWidth()
|
|
|
+ if (this.multiple) this.resetInputHeight()
|
|
|
+ },
|
|
|
+ setSelected () {
|
|
|
+ if (this.multiple) {
|
|
|
+ const result = []
|
|
|
+ if (Array.isArray(this.value)) {
|
|
|
+ this.value.forEach(value => {
|
|
|
+ const node = this.getNodeData(value)
|
|
|
+ if (node) result.push(node)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.selected = result
|
|
|
+ if (result.length === 0) {
|
|
|
+ this.selectedLabel = ''
|
|
|
+ }
|
|
|
+ this.$nextTick(this.resetInputHeight)
|
|
|
+ } else {
|
|
|
+ const node = this.getNodeData(this.value)
|
|
|
+ if (node) {
|
|
|
+ this.selected = node
|
|
|
+ this.selectedLabel = this.displayMode === 'name' ? node.label : node.path
|
|
|
+ if (this.filterable) this.query = this.selectedLabel
|
|
|
+ } else {
|
|
|
+ this.selected = {}
|
|
|
+ this.selectedLabel = ''
|
|
|
+ if (this.filterable) this.query = ''
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- traverse(this.data)
|
|
|
- }
|
|
|
- return node
|
|
|
- },
|
|
|
- onInputChange() {
|
|
|
- if (this.filterable && this.query !== this.selectedLabel) {
|
|
|
- this.query = this.selectedLabel
|
|
|
- this.handleQueryChange(this.query)
|
|
|
- }
|
|
|
- },
|
|
|
- filterNodeMethod(value, data) {
|
|
|
- if (!value) return true
|
|
|
- this.$nextTick(this.updatePopper)
|
|
|
- if (typeof this.filterMethod === 'function') {
|
|
|
- return this.filterMethod(value, data)
|
|
|
- } else {
|
|
|
- if (data[this.labelKey]) {
|
|
|
- return data[this.labelKey].indexOf(value) !== -1
|
|
|
- } else {
|
|
|
- if (data.label) {
|
|
|
- return data.label.indexOf(value) !== -1
|
|
|
- } else {
|
|
|
- return true
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- resetInputHeight() {
|
|
|
- this.$nextTick(() => {
|
|
|
- if (!this.$refs.reference || !this.$refs.tags) return
|
|
|
- const inputEl = this.$refs.reference.$refs.input
|
|
|
- const tags = this.$refs.tags
|
|
|
- let height = sizeMap[this.selectSize] || 40
|
|
|
- if (this.selected.length !== 0) {
|
|
|
- height = Math.max((tags.clientHeight + (tags.clientHeight > height ? 6 : 0)), height)
|
|
|
- }
|
|
|
- inputEl.style.height = `${height}px`
|
|
|
- if (this.visible) {
|
|
|
- this.updatePopper()
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- getValueIndex(arr = [], value) {
|
|
|
- let index = -1
|
|
|
- arr.some((item, i) => {
|
|
|
- if (item === value) {
|
|
|
- index = i
|
|
|
- return true
|
|
|
- } else {
|
|
|
- return false
|
|
|
- }
|
|
|
- })
|
|
|
- return index
|
|
|
- },
|
|
|
- deletePrevTag(e) {
|
|
|
- if (e.target.value.length <= 0) {
|
|
|
- this.selected.splice(-1, 1)
|
|
|
- const values = this.selected.map(({ value }) => value)
|
|
|
- this.$emit('input', values)
|
|
|
- this.emitChange(values)
|
|
|
- }
|
|
|
- },
|
|
|
- deleteTag(item) {
|
|
|
- this.selected = this.selected.filter(selectItem => selectItem !== item)
|
|
|
- const values = this.selected.map(({ value }) => value)
|
|
|
- this.$emit('input', values)
|
|
|
- this.emitChange(values)
|
|
|
- },
|
|
|
- resetInputWidth() {
|
|
|
- this.inputWidth = this.$refs.reference && this.$refs.reference ? this.$refs.reference.$el.getBoundingClientRect().width : 0
|
|
|
- },
|
|
|
- handleResize() {
|
|
|
- this.resetInputWidth()
|
|
|
- if (this.multiple) this.resetInputHeight()
|
|
|
- },
|
|
|
- setSelected() {
|
|
|
- if (this.multiple) {
|
|
|
- const result = []
|
|
|
- if (Array.isArray(this.value)) {
|
|
|
- this.value.forEach(value => {
|
|
|
- const node = this.getNodeData(value)
|
|
|
- if (node) result.push(node)
|
|
|
- })
|
|
|
- }
|
|
|
- this.selected = result
|
|
|
- if (result.length === 0) {
|
|
|
- this.selectedLabel = ''
|
|
|
- }
|
|
|
- this.$nextTick(this.resetInputHeight)
|
|
|
- } else {
|
|
|
- const node = this.getNodeData(this.value)
|
|
|
- if (node) {
|
|
|
- this.selected = node
|
|
|
- this.selectedLabel = this.displayMode === 'name' ? node.label : node.path
|
|
|
- if (this.filterable) this.query = this.selectedLabel
|
|
|
- } else {
|
|
|
- this.selected = {}
|
|
|
- this.selectedLabel = ''
|
|
|
- if (this.filterable) this.query = ''
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss">
|
cfort