vuetify學習第5天之樹形組件-treeview

vuetify學習第4天之樹形組件-treeview

---

目錄

---

---

內容

---

1、效果圖

2、源代碼

    本例使用環境爲vue框架

<template>
	...
	<v-treeview
            :active.sync="active"
            :open.sync="open"
            :items="categoryList"
            item-key="id"
            :load-children="loadChildren"
            open-on-click
            return-object
            activatable
            transition
            dense
            @update:active="updateActive"
          >
            <template v-slot:prepend="{ item, open }">
              <v-icon v-if="!item.icon">{{ open ? 'mdi-folder-open' : 'mdi-folder' }}</v-icon>
              <v-icon v-else>{{ 'mdi-'+ item.icon }}</v-icon>
            </template>
          </v-treeview>
	...
</template>
<script>
// const pause = ms => new Promise(resolve => setTimeout(resolve, ms));

export default {
  data() {
    return {
      open: [],
      active: [],
      categoryList: [],
      selected: {
        id: 0,
        items: []
      }
    };
  },

  created() {
    this.getCategoryList(0);
  },
  computed: {},
  watch: {
    active: {
      deep: true,
      handler() {
        this.selected.id = this.active[0].id;
        const items = this.active[0]._name.split(",");
        items.map(el => {
          return {
            text: el
          };
        });
        this.selected.items = items;
        // console.log(this.selected);
      }
    }
  },
  methods: {
    // 獲取分類列表
    getCategoryList(pid) {
      // console.log(item.id);
      this.axios
        .get("/item/category/list", {
          params: {
            pid: pid
          }
        })
        .then(resp => {
          if (resp.status != 200) {
            this.$message.error("獲取分類列表失敗");
          }
          resp.data.forEach(el => {
            el._name = el.name;
            if (el.isParent) {
              el.children = [];
            }
          });
          this.categoryList = resp.data;
        });
    },
    // 子分類懶加載
    loadChildren(item) {
      // console.log(item.isParent);
      // await pause(1500);
      return this.axios
        .get("/item/category/list", {
          params: {
            pid: item.id
          }
        })
        .then(resp => {
          if (resp.status != 200) {
            this.$message.error("獲取分類列表失敗");
          }
          resp.data.forEach(el => {
            el._name = item._name + "," + el.name;
            if (el.isParent) {
              el.children = [];
            }
          });
          item.children.push(...resp.data);
        });
    }
	...
</script>

後端返回數據示例：
[
	 {
        "id": 1,
        "name": "圖書、音像、電子書刊",
        "icon": "",
        "isParent": 1
    },
    {
        "id": 74,
        "name": "手機",
        "icon": "cellphone-basic",
        "isParent": 1
    }
	...
]

3、v-treeview常用屬性

名稱	類型	默認值	作用
active	array	[]	當前激活的葉子節點，.sync爲同步
items	array	[]	渲染的數據
item-key	any		每一項的唯一標記，被記錄到active數組
load-children	function		子節點懶加載函數
open-on-click	boolean	false	是否點擊打開
hoverable	boolean	false	是否鼠標懸停打開
return-object	boolean	false	是否返回對象，默認返回item-key,如果爲true，則返回當前渲染的對象，active中存儲爲對象
activatable	boolean	false	是否通過點擊標記爲激活狀態
transition	boolean	false	是否節點打開或者關閉是播放動畫
dense	boolean	fale	是否緊湊顯示

4、v-treeview 常用插槽

    本例使用前置插槽，顯示不同分類對應不同圖標。時間有限，只找了幾個圖標，其他都用文件夾圖標代替。

4.1、配置：

通用：
{
  item: any
  leaf: boolean
  selected: boolean
  indeterminate: boolean
  active: boolean
  open: boolean
}
本例：
 <template v-slot:prepend="{ item, open }">
              <v-icon v-if="!item.icon">{{ open ? 'mdi-folder-open' : 'mdi-folder' }}</v-icon>
              <v-icon v-else>{{ 'mdi-'+ item.icon }}</v-icon>
            </template>

5、常用事件

5、1詳解

名稱	參數類型	默認值	作用
update:active	array	[]	點擊葉子節點時觸發

官網地址：https://vuetifyjs.com/en/components/treeview#treeview
後記 ： 當需要實現子節點懶加載時，既配置load-children對應的函數，必須返回異步對象，比如常用的promise對象。不然出現第一次點擊不會展開，再次點擊展開子節點的情況。