TreeSelect(Iview+vue)
DIV树选择器首先引用iview,因为要用到iview的tree和selectTreeSellect其实就是将iview的tree和select进行结合,将tree选中的值传递给selecttree的on-check-change事件中将选中的树节点的key和title作为一个新数组付给select的options绑定的数组,将key付给select绑定的值。这样就完成了从tree到select的
·
DIV树选择器
- 首先引用iview,因为要用到iview的tree和select
- TreeSellect其实就是将iview的tree和select进行结合,将tree选中的值传递给select
- tree的
on-check-change
事件中将选中的树节点的key和title作为一个新数组付给select的options绑定的数组,将key付给select绑定的值。这样就完成了从tree到select的数据绑定 - 当tree和select都开启多选的情况下,select对选中的值进行编辑并不会影响树的选择,所以要实现从select到tree的数据绑定
- tree的
getCheckedNodes
方法可以获得选中的节点的数组,将该数组中的节点删除将直接影响tree的选中情况 - 将tree选中的node放入checkedNodes,将key组成keyList放入全局中
- 将entitySelelct选中改变时,将选中的值的list与keyList对比,找出改变的key,将checkedNodes中与key匹配的node的check改为false
html
<Select id="entitySelect" ref='entitySelect' v-model="selectedEntity" multiple
placeholder="请选择"
@on-change="entitySelectChange"
@on-open-change="onOpenChangeOfEntitySelect"
style="width: 220px; min-width:220px; margin-top: 5px;">
<Option v-for="item of entityList" :value="item.value" :key="item.value"
style="display: none;">{{ item.label }}
</Option>
<Tree :data="entityTreeData" expand-node=true show-checkbox ref='entityTree'
@on-check-change="entityTreeSelected"></Tree>
</Select>
data
entityTreeData: [],
entityList: [],
selectedEntity: [],
// 主体树选中节点的key集合,用于与selectedEntity对比,找到被取消的节点
checkedNodesKeyList: [],
// 被选中的节点列表,用于将select的选中信息同步到tree。找到被取消的节点,将被取消的节点的check改为false;
checkedNodes: [],
methods
// 主体下拉树选中事件
entityTreeSelected (data) {
let selected = []
let selectKeyList = []
data.forEach((element) => {
let key = element.key
let title = element.title
let code = element.code
let selectedItem = {
value: key,
label: title,
code: code
}
selectKeyList.push(key)
selected.push(selectedItem)
})
this.entityList = []
// 多选框
this.selectedEntity = []
this.entityList = selected
this.selectedEntity = selectKeyList
// 获取被选中的节点
this.checkedNodes = this.$refs.entityTree.getCheckedNodes()
this.checkedNodesKeyList = []
this.checkedNodes.forEach(element => {
this.checkedNodesKeyList.push(element.key)
})
// 选中后下拉框收回
// this.$refs.entitySelect.toggleMenu();
this.page.currentPageNum = 1
this.refreshTable()
},
entitySelectChange (data) {
document.getElementById('entitySelect').style.width = 'auto'
this.condition.entity = []
// 将select数据和tree数据同步的思路:
// 将tree选中的node放入checkedNodes,将key组成keyList放入全局中,
// 将entitySelelct选中改变时,将选中的值的list与keyList对比,找出改变的key,将checkedNodes中与key匹配的node的check改为false
let diff = this.checkedNodesKeyList.filter(val => {
return this.selectedEntity.indexOf(val) === -1
})
diff.forEach(element => {
// this.checkedNodes.find(item => item.key === element).checked=false;
let nodeKey = this.checkedNodes.find(item => item.key === element).nodeKey
let checked = false
this.$refs.entityTree.handleCheck({ checked, nodeKey })
})
// 在entityList找到被选中的主体,并加入给全局的选中条件condition
data.forEach(element => {
let rightItem = this.entityList.find(item => item.value === element)
if (!rightItem) {
this.condition.entity = []
return
}
let entityItem = {}
entityItem.entityKey = rightItem.value
entityItem.entityCode = rightItem.code
entityItem.entityTitle = rightItem.label
this.condition.entity.push(entityItem)
})
},
onOpenChangeOfEntitySelect (flag) {
if (flag) {
// 展开下拉框置空树(获取一个全新的树)
// this.getEntity();
} else {
}
},
// ------获取主体&处理主体结束------
更多推荐
已为社区贡献1条内容
所有评论(0)