Quasar中＜q-tree＞使用的部分说明与使用示例

官网地址：http://v1.quasarchs.com/vue-components/tree/#%E7%BB%BC%E5%90%88%E5%AE%9E%E4%BE%8B

<template #option>
  <q-tree
    ref="treeRef"
    :nodes="simple"
    node-key="label"
    selected-color="primary"
    :selected.sync="type"
    no-selection-unset
    @update:selected="closeCheckBox"
  />
</template>

代码说明：

• ref是用来后续获取当前选中的数值（后面有示例，简单明了）
• :nodes表示tree数据
• node-key表示tree数据中的唯一主键，类似与v-for中的:key
• selected-color表示选中后的颜色展示
• :selected.sync表示选择以后展示的内容
• no-selection-unset表示选中以后再次点击不会被取消
• default-expand-all表示默认展开所有节点

<template>
  <div style="height: 500px;width: 500px;">
    <div style="height: 200px;width: 200px">
      <span>
        此时选中的值为：{{ this.type }}
      </span>
      <br>
      <span>
        此时选中的值的id为：{{ this.selectNodeValue }}
      </span>
    </div>
    <q-select
      style="width: 200px;height: 50px;"
      outlined
      v-model="type"
      :options="simple"
      emit-value
      map-options
    >
      <template #option>
        <q-tree
          ref="treeRef"
          :nodes="simple"
          node-key="label"
          selected-color="primary"
          :selected.sync="type"
          no-selection-unset
          @update:selected="closeCheckBox"
        />
      </template>
    </q-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: "",
      selectNodeValue: '',
      simple: [
        {
          "label": "我是一类",
          "data": {
            "id": "1",
            "name": "我是一类"
          },
          "children": [
            {
              "label": "我是二类",
              "data": {
                "id": "12",
                "name": "我是二类"
              },
              "children": [
                {
                  "label": "我是三类之一",
                  "data": {
                    "id": "1231",
                    "name": "我是三类之一"
                  },
                  "children": null
                },
                {
                  "label": "我是三类之二",
                  "data": {
                    "id": "1232",
                    "name": "我是三类之二"
                  },
                  "children": null
                },
                {
                  "label": "我是三类之三",
                  "data": {
                    "id": "1233",
                    "name": "我是三类之三"
                  },
                  "children": null
                }
              ]
            }
          ]
        }
      ],
    }
  },
  methods: {
    closeCheckBox(newVal) {
      this.type = newVal //这个值是选框中所展示的数值
      
      const nodeData = this.$refs.treeRef.getNodeByKey(newVal)
      this.selectNodeValue = nodeData.data.id // 用来获取选框中选择的数据的id
    },
  }

}
</script>

图片示例：