TreeSelect(Iview+vue)

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 {

      }
    },
    // ------获取主体&处理主体结束------