河南网站建站系统哪家好,有了域名 网站建设,外贸销售网站有哪些,帮助做ppt的网站elementUI实现selecttree自定义下拉框树形组件支持多选和搜索 效果图定义子组件父组件应用 效果图 定义子组件
主要结合el-select和el-tree两个组件改造的。
templatediv classselectTreeel-select filterable :filter-methodfilterMe… elementUI实现selecttree自定义下拉框树形组件支持多选和搜索 效果图定义子组件父组件应用 效果图 定义子组件
主要结合el-select和el-tree两个组件改造的。
templatediv classselectTreeel-select filterable :filter-methodfilterMethod classmain-select-tree refselectTree multiple v-modeltransitValue remove-tagremoveTag clearable clearclearInput focusblurInputel-option v-foritem in selectOptions :keyitem.department_id :labelitem.name :valueitem.department_id styledisplay: none; /el-tree classmain-select-el-tree refselecteltree :filter-node-methodfilterNode show-checkbox check-changehandleCheckChange :highlight-currenttrue :datadataArray :propsdefaultProps :expand-on-click-nodefalse node-keydepartment_id node-clickhandleNodeClick :current-node-keycurrentKeyspan classcustom-tree-node slot-scope{ node, data }span :titledata.description{{ node.label }}/span/span/el-tree/el-select/div
/templatescript
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 truereturn 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 langless scoped
.main-select-el-tree {max-height: 300px;overflow-y: auto;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item {display: none;
}
/style父组件应用
divtemplatep classpTitle{{ 选择团队 }}/pselect-tree refselectTree treeChangetreeChangeFun :dataArrayorgList //template
/divimport 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 {}; // 构建mapdata.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格式
