elementUI实现selecttree自定义下拉框树形组件支持多选和搜索
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
效果图
定义子组件
主要结合el-select和el-tree两个组件改造的。
<template>
<div class="selectTree">
<el-select filterable :filter-method="filterMethod" class="main-select-tree" ref="selectTree" multiple v-model="transitValue" @remove-tag="removeTag" clearable @clear="clearInput" @focus="blurInput">
<el-option v-for="item in selectOptions" :key="item.department_id" :label="item.name" :value="item.department_id" style="display: none;" />
<el-tree class="main-select-el-tree" ref="selecteltree" :filter-node-method="filterNode" show-checkbox @check-change="handleCheckChange" :highlight-current="true" :data="dataArray" :props="defaultProps" :expand-on-click-node="false" node-key="department_id" @node-click="handleNodeClick" :current-node-key="currentKey">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span :title="data.description">{{ node.label }}</span>
</span>
</el-tree>
</el-select>
</div>
</template>
<script>
export default {
name: 'selectTree',
props: {
dataArray: Array
},
data () {
return {
transitValue: [],
selectOptions: [],
currentKey: null,
defaultProps: {
label: 'name',
children: 'children'
}
}
},
computed: {
formatData () {
let result = []
function getChild (item) {
item.forEach((i, x) => {
if (Array.isArray(i['children'])) {
result.push(i)
getChild(i['children'])
} else {
result.push(i)
}
})
}
getChild(this.dataArray)
return result
}
},
methods: {
filterMethod (value) {
this.$refs['selecteltree'].filter(value.trim())
},
blurInput () {
console.log('1213')
this.$refs['selecteltree'].filter('')
},
filterNode(value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
},
clearInput () {
this.$refs['selecteltree'].setCheckedKeys([])
},
removeTag (e) {
this.$refs['selecteltree'].setChecked(e, false)
},
handleCheckChange () {
let check = this.$refs['selecteltree'].getCheckedNodes()
console.log(check)
let arr = check.filter((i) => !i.children)
this.transitValue = arr.map((i) => {
return i.department_id
})
this.$emit('treeChange', arr)
}
},
watch: {
formatData: {
immediate: true,
handler: function (n) {
if (n.length > 0) {
this.selectOptions = n
} else {
this.selectOptions = []
}
}
}
}
}
</script>
<style lang="less" scoped>
.main-select-el-tree {
max-height: 300px;
overflow-y: auto;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item {
display: none;
}
</style>
父组件应用
<div>
<template>
<p class="pTitle">{{ 选择团队 }}</p>
<select-tree ref="selectTree" @treeChange="treeChangeFun" :dataArray="orgList" />
</template>
</div>
import selectTree from '@/components/selectTreeMulti.vue'
data(){
orgList: [],
},
mounted(){
this.orgList = translateDataToTree(data).treeData // data数据格式参看备注1
},
components: {
selectTree
},
methods: {
treeChangeFun(val) {
console.log(val)
},
translateDataToTree(data) {
data = JSON.parse(JSON.stringify(data))
// 删除所有 children,以防止多次调用
let checkArr = []
data.forEach(function (item) {
delete item.children;
if (item.is_bind) {
checkArr.push(item.department_id)
}
});
let map = {}; // 构建map
data.forEach(i => {
map[i.department_id] = i; // 构建以id为键 当前数据为值
});
let treeData = [];
data.forEach(child => {
const mapItem = map[child.parent_id]; // 判断当前数据的parentId是否存在map中
if (mapItem) { // 存在则表示当前数据不是最顶层数据
// 注意: 这里的map中的数据是引用了arr的它的指向还是arr,当mapItem改变时arr也会改变,踩坑点
// 这里判断mapItem中是否存在children, 存在则插入当前数据, 不存在则赋值children为[]然后再插入当前数据
(mapItem.children || ( mapItem.children = [] )).push(child)
} else { // 不存在则是组顶层数据
treeData.push(child);
}
});
return {
treeData: treeData,
checkArr: checkArr
};
}
}
data格式:
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 6 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)