toesbieya
6 years ago
parent
e7aebfc71a
commit
aa66f586cf
@ -0,0 +1,214 @@ |
|||||||
|
<template> |
||||||
|
<el-select |
||||||
|
ref="select" |
||||||
|
:value="value" |
||||||
|
:multiple="multiple" |
||||||
|
:disabled="disabled" |
||||||
|
:size="size" |
||||||
|
:clearable="clearable" |
||||||
|
:placeholder="placeholder" |
||||||
|
:popper-append-to-body="popperAppendToBody" |
||||||
|
:automatic-dropdown="automaticDropdown" |
||||||
|
@input="$emit('input',$event)" |
||||||
|
@change="$emit('change',$event)" |
||||||
|
@remove-tag="removeTag" |
||||||
|
> |
||||||
|
<div class="tree-select-container" slot="empty"> |
||||||
|
<el-input |
||||||
|
ref="search" |
||||||
|
v-if="filterable && filterMethod" |
||||||
|
v-model="search" |
||||||
|
size="mini" |
||||||
|
clearable |
||||||
|
@input="onSearch" |
||||||
|
/> |
||||||
|
<el-tree |
||||||
|
ref="tree" |
||||||
|
:data="data" |
||||||
|
:node-key="nodeKey" |
||||||
|
:props="props" |
||||||
|
:show-checkbox="multiple" |
||||||
|
:default-checked-keys="defaultCheckedKeys" |
||||||
|
:current-node-key="multiple ? undefined : value" |
||||||
|
:highlight-current="!multiple" |
||||||
|
:expand-on-click-node="false" |
||||||
|
:check-on-click-node="multiple" |
||||||
|
:filter-node-method="filterMethod" |
||||||
|
:accordion="accordion" |
||||||
|
@node-click="nodeClick" |
||||||
|
@check="check" |
||||||
|
> |
||||||
|
<slot slot-scope="{node,data}"> |
||||||
|
<span :class="{'el-tree-node__label':true,'is-disabled':node.disabled}">{{node.label}}</span> |
||||||
|
</slot> |
||||||
|
</el-tree> |
||||||
|
</div> |
||||||
|
</el-select> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import {debounce} from "@/utils" |
||||||
|
import {flatTree} from "@/utils/tree" |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "TreeSelect", |
||||||
|
|
||||||
|
props: { |
||||||
|
value: {required: true}, |
||||||
|
data: {type: Array, default: () => []}, |
||||||
|
multiple: Boolean, |
||||||
|
disabled: Boolean, |
||||||
|
size: String, |
||||||
|
clearable: {type: Boolean, default: true}, |
||||||
|
placeholder: String, |
||||||
|
filterable: Boolean, |
||||||
|
filterMethod: Function, |
||||||
|
nodeKey: {type: String, default: 'id'}, |
||||||
|
props: { |
||||||
|
default() { |
||||||
|
return { |
||||||
|
children: 'children', |
||||||
|
label: 'label', |
||||||
|
disabled: 'disabled' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
accordion: {type: Boolean, default: true}, |
||||||
|
popperAppendToBody: Boolean, |
||||||
|
automaticDropdown: Boolean |
||||||
|
}, |
||||||
|
|
||||||
|
data() { |
||||||
|
return { |
||||||
|
currentNode: null, |
||||||
|
search: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
computed: { |
||||||
|
defaultCheckedKeys() { |
||||||
|
return this.multiple ? this.value : [] |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
watch: { |
||||||
|
value(v) { |
||||||
|
const method = this.multiple ? 'setCheckedKeys' : 'setCurrentKey' |
||||||
|
this.$refs.tree[method](v || null) |
||||||
|
}, |
||||||
|
|
||||||
|
data() { |
||||||
|
this.initSelectOptions() |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
removeTag(v) { |
||||||
|
const tree = this.$refs.tree |
||||||
|
const value = [...this.value] |
||||||
|
|
||||||
|
//被移除的选项的所有父级的ID |
||||||
|
const parents = [] |
||||||
|
let removeNode = tree.getNode(v) |
||||||
|
while (removeNode && removeNode.parent) { |
||||||
|
parents.push(removeNode.parent.key) |
||||||
|
removeNode = removeNode.parent |
||||||
|
} |
||||||
|
|
||||||
|
//移除所有子级、所有父级 |
||||||
|
for (let i = value.length - 1; i >= 0; i--) { |
||||||
|
const isChild = this.getNodeParent(tree.getNode(value[i]), ({key}) => key === v) |
||||||
|
if (isChild || parents.includes(value[i])) { |
||||||
|
value.splice(i, 1) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
value.length < this.value.length && this.$emit('input', value) |
||||||
|
}, |
||||||
|
|
||||||
|
onSearch(v) { |
||||||
|
this.$refs.tree.filter(v) |
||||||
|
}, |
||||||
|
|
||||||
|
nodeClick(data, node) { |
||||||
|
if (this.multiple) return |
||||||
|
|
||||||
|
if (node.disabled) { |
||||||
|
return this.$refs.tree.setCurrentKey() |
||||||
|
} |
||||||
|
|
||||||
|
if (this.currentNode === data) { |
||||||
|
this.currentNode = null |
||||||
|
this.$refs.tree.setCurrentKey() |
||||||
|
} |
||||||
|
else this.currentNode = data |
||||||
|
|
||||||
|
this.$emit('input', this.currentNode && this.currentNode[this.nodeKey]) |
||||||
|
this.$refs.select.blur() |
||||||
|
}, |
||||||
|
|
||||||
|
check(data, {checkedKeys}) { |
||||||
|
this.multiple && this.$emit('input', checkedKeys) |
||||||
|
}, |
||||||
|
|
||||||
|
getNodeParent(node, predicate) { |
||||||
|
if (!node || predicate(node)) return node |
||||||
|
return this.getNodeParent(node.parent, predicate) |
||||||
|
}, |
||||||
|
|
||||||
|
initSelectOptions() { |
||||||
|
this.$refs.select.cachedOptions = |
||||||
|
flatTree(this.data, this.props.children) |
||||||
|
.map(i => ({ |
||||||
|
value: i[this.nodeKey], |
||||||
|
currentLabel: i[this.props.label] |
||||||
|
})) |
||||||
|
this.selectOptionsTrigger() |
||||||
|
}, |
||||||
|
|
||||||
|
//模拟el-select对options的watch |
||||||
|
selectOptionsTrigger() { |
||||||
|
const select = this.$refs.select |
||||||
|
if (select.$isServer) return |
||||||
|
this.$nextTick(() => { |
||||||
|
select.broadcast('ElSelectDropdown', 'updatePopper') |
||||||
|
}) |
||||||
|
if (select.multiple) { |
||||||
|
select.resetInputHeight() |
||||||
|
} |
||||||
|
let inputs = select.$el.querySelectorAll('input') |
||||||
|
if ([].indexOf.call(inputs, document.activeElement) === -1) { |
||||||
|
select.setSelected() |
||||||
|
} |
||||||
|
if (select.defaultFirstOption && (select.filterable || select.remote) && select.filteredOptionsCount) { |
||||||
|
select.checkDefaultFirstOption() |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
created() { |
||||||
|
this.onSearch = debounce(this.onSearch) |
||||||
|
}, |
||||||
|
|
||||||
|
mounted() { |
||||||
|
this.currentNode = this.$refs.tree.getCurrentNode() |
||||||
|
this.initSelectOptions() |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.tree-select-container { |
||||||
|
padding: 8px; |
||||||
|
|
||||||
|
> .el-input { |
||||||
|
margin-bottom: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-tree-node__label.is-disabled { |
||||||
|
background-color: #edf2fc; |
||||||
|
border-color: #dcdfe6; |
||||||
|
cursor: not-allowed; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<tree-select v-model="value" :data="data" multiple filterable :filter-method="filter"/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import TreeSelect from '@/components/TreeSelect' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "treeSelectExample", |
||||||
|
|
||||||
|
components: {TreeSelect}, |
||||||
|
|
||||||
|
data() { |
||||||
|
return { |
||||||
|
value: [], |
||||||
|
data: [ |
||||||
|
{id: 1, label: '一级 1', children: [{id: 2, label: '二级 1-1'}, {id: 3, label: '二级 1-2'}]}, |
||||||
|
{id: 4, label: '一级 2', children: [{id: 5, label: '二级 2-1'}]}, |
||||||
|
], |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
filter(v, data) { |
||||||
|
return data.label.includes(v) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
Loading…
Reference in new issue