快捷導(dǎo)航

elementui?Select選擇器嵌套tree實(shí)現(xiàn)TreeSelect方式

更新時(shí)間：2023年10月08日 14:46:09 作者：向錢看`向厚賺

這篇文章主要介紹了elementui?Select選擇器嵌套tree實(shí)現(xiàn)TreeSelect方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

個(gè)人實(shí)現(xiàn)記錄

效果可以設(shè)置默認(rèn)要展開和勾選的狀態(tài)
點(diǎn)擊select里的標(biāo)簽關(guān)閉樹形圖對應(yīng)的取消勾選效果

html

<el-select v-model="value1" multiple placeholder="請選擇" @change="changeData">
      <el-option style="height:auto" :value="SelectedArray">
        <el-tree
          :data="dataList"
          show-checkbox
          node-key="id"
          ref="tree"
          :check-strictly="true"
          highlight-current
          :props="defaultProps"
          @check="checkClick"
          :default-expanded-keys="setkey"
          :default-expand-all="false"
        >
        </el-tree>
      </el-option>
    </el-select>

default-expand-all 是否默認(rèn)展開所有節(jié)點(diǎn)
default-expanded-keys 默認(rèn)展開的節(jié)點(diǎn)的 key 的數(shù)組
check 當(dāng)復(fù)選框被點(diǎn)擊的時(shí)候觸發(fā)
-check-strictly 父子節(jié)點(diǎn)不相互關(guān)聯(lián)
highlight-current 是否高亮當(dāng)前選中節(jié)點(diǎn)，默認(rèn)值是 false。

代碼部分

 data () {
    return {
      setkey: [1], // 默認(rèn)展開節(jié)點(diǎn)
      dateList: [], // 遍歷用
      SelectedArray: [12, 13], // 選中的數(shù)組
      dataList: [
        {
          id: 1,
          name: '總公司',
          parent_id: null,
          parent_name: null,
          has_children: true,
          children: [
            {
              id: 2,
              name: '1xxxx部門',
              parent_id: 1,
              parent_name: '總公司',
              has_children: true,
              children: [
                {
                  id: 12,
                  name: 'x1x項(xiàng)目',
                  parent_id: 1,
                  parent_name: '1xxxx部門',
                  has_children: false,
                  children: []
                },
                {
                  id: 13,
                  name: 'x22222x項(xiàng)目',
                  parent_id: 2,
                  parent_name: '1xxxx部門',
                  has_children: true,
                  children: [
                    {
                      id: 19,
                      name: 'xxx',
                      parent_id: 13,
                      parent_name: 'x22222x項(xiàng)目',
                      has_children: false,
                      children: []
                    }
                  ]
                }
              ]
            },
            {
              id: 15,
              name: '管理辦公室',
              parent_id: 1,
              parent_name: '總公司',
              has_children: false,
              children: []
            },
            {
              id: 16,
              name: '技術(shù)中心',
              parent_id: 1,
              parent_name: '總公司',
              has_children: false,
              children: []
            }
          ]
        }
      ], // tree數(shù)據(jù)
      value1: [], // select綁定的值
      // 對應(yīng)的字段
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },

<script>
// highlight-current是否高亮當(dāng)前選中節(jié)點(diǎn)，默認(rèn)值是 false。
  methods: {
    async getTreeData () {
      try {
        const {
          data: { data }
        } = await this.$http.get('http://localhost:8848/treeData')
        console.log(data)
        this.dataList = data.data_list
        console.log(this.dataList)
      } catch (error) {
        console.log(error)
      }
    },
    changeData (e) {
      console.log('選中改變的值', e, this.dateList)
      const setkey = []
      for (let index = 0; index < this.dateList.length; index++) {
        for (let index1 = 0; index1 < e.length; index1++) {
          if (this.dateList[index].name === e[index1]) {
            setkey.push(this.dateList[index].id)
          }
        }
      }
      console.log(setkey)
      this.setkey = setkey
      // 重新 設(shè)置tree
      this.$refs.tree.setCheckedKeys(this.setkey)
    },
    // 點(diǎn)擊樹形圖復(fù)選框觸發(fā) 
    checkClick (checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) {
      //   console.log(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys)
      //   點(diǎn)擊了復(fù)選框 使用this.$refs.tree.getCheckedNodes獲取當(dāng)前選中的節(jié)點(diǎn)
      const res = this.$refs.tree.getCheckedNodes(false, true) // 這里兩個(gè)true，1. 是否只是葉子節(jié)點(diǎn) 2. 是否包含半選節(jié)點(diǎn)（就是使得選擇的時(shí)候不包含父節(jié)點(diǎn)）
      console.log('點(diǎn)擊樹形圖獲取當(dāng)前選中的節(jié)點(diǎn)', res)
      this.dateList = res
      const labelArr = []
      const valueArr = []
      res.forEach((element, index) => {
        labelArr.push(element.name)
        valueArr.push(element.id)
      })
      this.value1 = labelArr // select顯示的數(shù)據(jù)
      this.SelectedArray = valueArr // 我要發(fā)送給后端的數(shù)據(jù)
      console.log(this.value1, this.SelectedArray)
    }
  },
  created () {
  //獲取tree數(shù)據(jù)  data里面寫了
    // this.getTreeData() 
  },
  // 默認(rèn)選中樹形圖的復(fù)選框  回顯的操作
  mounted () {
    this.$refs.tree.setCheckedKeys(this.setkey)
  }
}
</script>