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对象。不然出现第一次点击不会展开，再次点击展开子节点的情况。