vuetify Learning Tree component -treeview 5 days

vuetify Learning Tree Day 4 of the assembly -treeview

---

table of Contents

---

---

content

---

1, the effect of FIG.

2, the source code

    This example uses the environment vue frame

<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 common properties

name	Types of	Defaults	effect
active	array	[]	Currently active leaf node, .sync synchronization
items	array	[]	Rendering data
item-key	any		Each unique tag is recorded to the active array
load-children	function		Lazy load child nodes function
open-on-click	boolean	false	Whether Click to open
hoverable	boolean	false	Mouse over whether to open
return-object	boolean	false	Whether to return the object, the default return item-key, if true, the current rendered object is returned, active stored as objects
activatable	boolean	false	Click to mark whether by active state
transition	boolean	false	Whether the node is open or closed movie playback
dense	boolean	speak	Whether compact display

4, v-treeview common slot

    This example uses the front slot, different categories corresponding to different display icons. Time is limited, only to find a few icons, icons are replaced by other folder.

4.1 Configuration:

通用：
{
  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, common events

5,1 Comments

name	Parameter Type	Defaults	effect
update:active	array	[]	When click the leaf node triggers

Official website address: https://vuetifyjs.com/en/components/treeview#treeview
Postscript : When the child node lazy loading required to achieve both the function configuration corresponding load-children, must return an asynchronous object, such as the commonly used objects promise. Otherwise appear first click does not expand, click to expand a child node of the situation again.