Vue實現(xiàn)無限級樹形選擇器

更新時間：2022年09月08日 09:12:55 作者：茶無味的一天???????

這篇文章主要介紹了Vue實現(xiàn)無限級樹形選擇器，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下

簡單實現(xiàn)下樣式

創(chuàng)建 Tree.vue 組件（為方便閱讀，代碼有省略）：

<template>
  <ul class="treeMenu">
    <li v-for="(item, index) in data" :key="index">
      <i v-show="item.children" :class="triangle" />
      <p :class="treeNode">
        <label class="checkbox-wrap" @click="checked(item)">
          <input v-if="isSelect" v-model="item.checked" type="checkbox" class="checkbox" />
        </label>
        <span class="title" @click="tap(item, index)">{{ item.title }}</span>
      </p>
      <!-- TODO -->
    </li>
  </ul>
</template>
<script>
export default {
  name: 'TreeMenus',
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    // 是否開啟節(jié)點可選擇
    isSelect: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {,
      tapScopes: {},
      scopes: {},
    }
  },
}
</script>
<style scoped>
...... some code ......
</style>

展開收縮我們使用 CSS 來創(chuàng)建一個三角形:

.triangle {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-left: 8px solid grey;
  transition: all 0.1s;
  left: 6px;
  margin: 6px 0 0 0;
}

然后定義一個展開時的 class，旋轉(zhuǎn)角度調(diào)整一下定位：

.caret-down {
  transform: rotate(90deg);
  left: 2px;
  margin: 9px 0 0 0;
}

由于每個節(jié)點控制展開閉合的變量都是獨立的，為了不污染數(shù)據(jù)，這里我們定義一個對象 tapScopes 來控制就好，記得使用 $set 來讓視圖響應(yīng)變化:

// 當(dāng)點擊三角形時，圖標(biāo)變化：
changeStatus(index) {
    this.$set(this.tapScopes, index, this.tapScopes[index] ? (this.tapScopes[index] === 'open' ? 'close' : 'open') : 'open')
}

遞歸渲染

現(xiàn)在我們只渲染了第一層數(shù)據(jù)，如何循環(huán)渲染下一級數(shù)據(jù)呢，其實很簡單，往上面 TODO 的位置插入組件自身即可（相當(dāng)于引入了自身作為 components），只要組件設(shè)置了 name 屬性，

Vue 就可以調(diào)用該組件，：

<li v-for="(item, index) in data">
// .... some code ....
    <tree-menus :data="item.children" v-bind="$props" />
</li>

<script>
export default {
  name: 'TreeMenus'
// .... some code ....

遞歸組件接收相同的 props 我們不必一個個傳遞，可以直接寫成 v-bind="$props" 把代理的 props 對象傳進去（比如上面定義的 isSelect 就會被一直傳遞），只不過 data 被我們覆寫成了循環(huán)的下一級。最后使用 v-show 控制一下展開閉合的效果，基本的交互就實現(xiàn)出來了：

定義參數(shù)

樹形結(jié)構(gòu)數(shù)據(jù)一般都是如下的 嵌套結(jié)構(gòu)，再復(fù)雜也只不過是字段變多了而已，這幾個 特征字段 是肯定存在的：key、label、children，以下面的參考數(shù)據(jù)為例: 這里的 key 是 id，用于標(biāo)識唯一性(該字段在整棵樹中是唯一的)，label 則是 title 字段，用于顯示節(jié)點名稱，最后的 children 則是指下一級節(jié)點，它的特征與父級一致。

[
    {
        id: 1,
        title: "",
        children: [{
            id: 2,
            title: "",
            children: ......
        }]
    }
]

所以我們的選擇器組件可以定義一個關(guān)鍵參數(shù)選項，用于指定節(jié)點中的這幾個屬性值。

props: {
// ... some code ....
    props: {
      type: Object,
      default: () => {
        return {
          children: 'children',
          label: 'title',
          key: 'id',
        }
      },
    },
  },

組件中的一些關(guān)鍵參數(shù)都修改成動態(tài)的形式:

:key="index"            =>       :key="item[props.key]"
:data="item.children"   =>       :data="item[props.children]"
{{ item.title }}        =>       {{ item[props.label] }}

實現(xiàn)點擊事件

現(xiàn)在我們來實現(xiàn)一個點擊事件 node-click: 為節(jié)點綁定一個 click 事件，點擊后觸發(fā) $emit 把節(jié)點對象傳進方法中即可:

<span class="title" @click="tap(item, index)"> ... </span>

methods: {
    tap(item, index) {
      this.$emit('node-click', item)
    }
.........

// 調(diào)用時:

<Tree @node-click="handle" :data="treeData" />

methods: {
    handle(node) {
      console.log('點擊節(jié)點 Data : ', node)
    }
.......

這時問題來了，由于組件是遞歸嵌套的，如何在子節(jié)點中點擊時也能觸發(fā)最外層的事件呢？這時就需要利用 Vue 提供的 $listeners 這個 property，配合 v-on="$listeners" 將所有的事件監(jiān)聽器指向組件中循環(huán)的子組件：

<tree-menus .... v-on="$listeners"></tree-menus>

2022-09-07 18.22.35.gif

往組件中定義任何其它方法，都可以像這樣正常觸發(fā)到調(diào)用它的組件那里。

完整代碼

Tree.vue

<template>
  <ul class="treeMenu">
    <li v-for="(item, index) in data" :key="item[props.key]">
      <i v-show="item[props.children]" :class="['triangle', carets[tapScopes[index]]]" @click="changeStatus(index)" />
      <p :class="['treeNode', { 'treeNode--select': item.onSelect }]">
        <label class="checkbox-wrap" @click="checked(item)">
          <input v-if="isSelect" v-model="item.checked" type="checkbox" class="checkbox" />
        </label>
        <span class="title" @click="tap(item, index)">{{ item[props.label] }}</span>
      </p>
      <tree-menus v-show="scopes[index]" :data="item[props.children]" v-bind="$props" v-on="$listeners"></tree-menus>
    </li>
  </ul>
</template>
<script>
const CARETS = { open: 'caret-down', close: 'caret-right' }
export default {
  name: 'TreeMenus',
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    isSelect: {
      type: Boolean,
      default: false,
    },
    props: {
      type: Object,
      default: () => {
        return {
          children: 'children',
          label: 'title',
          key: 'id',
        }
      },
    },
  },
  data() {
    return {
      carets: CARETS,
      tapScopes: {},
      scopes: {},
    }
  },
  methods: {
    operation(type, treeNode) {
      this.$emit('operation', { type, treeNode })
    },
    tap(item, index) {
      this.$emit('node-click', item)
    },
    changeStatus(index) {
      this.$emit('change', this.data[index])
      // 圖標(biāo)變化
      this.$set(this.tapScopes, index, this.tapScopes[index] ? (this.tapScopes[index] === 'open' ? 'close' : 'open') : 'open')
      // 展開閉合
      this.$set(this.scopes, index, this.scopes[index] ? false : true)
    },
    async checked(item) {
      this.$emit('checked', item)
    },
  },
}
</script>
<style scoped>
.treeMenu {
  padding-left: 20px;
  list-style: none;
  position: relative;
  user-select: none;
}

.triangle {
  transition: all 0.1s;
  left: 6px;
  margin: 6px 0 0 0;
  position: absolute;
  cursor: pointer;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-left: 8px solid grey;
}
.caret-down {
  transform: rotate(90deg);
  left: 2px;
  margin: 9px 0 0 0;
}
.checkbox-wrap {
  display: flex;
  align-items: center;
}
.checkbox {
  margin-right: 0.5rem;
}
.treeNode:hover,
.treeNode:hover > .operation {
  color: #3771e5;
  background: #f0f7ff;
}
.treeNode--select {
  background: #f0f7ff;
}
.treeNode:hover > .operation {
  opacity: 1;
}
p {
  position: relative;
  display: flex;
  align-items: center;
}
p > .title {
  cursor: pointer;
}
a {
  color: cornflowerblue;
}
.operation {
  position: absolute;
  right: 0;
  font-size: 18px;
  opacity: 0;
}
</style>

Mock.js

export default {
  stat: 1,
  msg: 'ok',
  data: {
    list: [
      {
        key: 1,
        title: '一級機構(gòu)部門',
        children: [
          {
            key: 90001,
            title: '測試機構(gòu)111',
            children: [
              {
                key: 90019,
                title: '測試機構(gòu)111-2',
              },
              {
                key: 90025,
                title: '機構(gòu)機構(gòu)',
                children: [
                  {
                    key: 90026,
                    title: '機構(gòu)機構(gòu)-2',
                  },
                ],
              },
            ],
          },
          {
            key: 90037,
            title: '另一個機構(gòu)部門',
          },
        ],
      },
      {
        key: 2,
        title: '小賣部總舵',
        children: [
          {
            key: 90037,
            title: '小賣部河邊分部',
          },
        ],
      },
    ],
  },
}

調(diào)用組件：

<template>
  <div class="about">
    <Tree :isSelect="isSelect" :data="treeData" @node-click="handle" @change="loadData" />
  </div>
</template>

<script>
import Tree from '@/Tree.vue'
import json from '@/mock.js'

export default {
  components: { Tree },
  data() {
    return {
      treeData: [],
      isSelect: false,
      defaultProps: {
        children: 'children',
        label: 'title',
        key: 'id',
      },
    }
  },
  created() {
    this.treeData = json.data.list
  },
  methods: {
    handle(node) {
      console.log('點擊節(jié)點 Data : ', node)
    },
    loadData(treeNode) {
      console.log(treeNode)
      // eg: 動態(tài)更新子節(jié)點
      // treeNode.children = JSON.parse(JSON.stringify(json.data.list))
      // this.treeData = [...this.treeData]
    },
  },
}
</script>

到此這篇關(guān)于Vue實現(xiàn)無限級樹形選擇器的文章就介紹到這了,更多相關(guān)Vue選擇器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: