安装

    npm install --save lcl-ui-plugin

使用

<template>
  <LTree
    :treeData="treeData"
    :allowSelectParent="false"
    :defaultExpandAll="true"
    :allowMultiple="false"
    v-model:expandedKeys="expandedKeys"
    v-model:selectedKeys="selectedKeys"
    rowKey="id"
    :fieldNames="{
      valueKey: 'id',
      title: 'name',
      children: 'child_list',
    }"
    @expand="expand"
    @select="select"
  >
  </LTree>
</template>
<script setup>
// 引入组件
import { lTree } from "lcl-ui-plugin";
// 引入组件的样式
import "lcl-ui-plugin/style.css";
import { ref } from "vue";
const treeData = ref([
  {
    id: 1391,
    pid: 0,
    textbook_version_id: 94,
    name: "第1单元",
    sort: 1,
    child_list: [
      {
        id: 1392,
        pid: 1391,
        textbook_version_id: 94,
        name: "1.1 登月",
        sort: 1,
        child_list: null,
      },
      {
        id: 1393,
        pid: 1391,
        textbook_version_id: 94,
        name: "1.2 正方形组成的图形",
        sort: 2,
        child_list: null,
      },
      {
        id: 1394,
        pid: 1391,
        textbook_version_id: 94,
        name: "1.3 减法塔",
        sort: 3,
        child_list: null,
      },
    ],
  },
  {
    id: 1395,
    pid: 0,
    textbook_version_id: 94,
    name: "第2单元",
    sort: 2,
    child_list: [
      {
        id: 1396,
        pid: 1395,
        textbook_version_id: 94,
        name: "2.1 整十数、整百数的除法",
        sort: 1,
        child_list: null,
      },
      {
        id: 1397,
        pid: 1395,
        textbook_version_id: 94,
        name: "2.2 大卖场中的乘法",
        sort: 2,
        child_list: null,
      },
    ],
  },
]);
const expandedKeys = ref([]);
const selectedKeys = ref([]);

const expand = (expandedKeys, item) => {
  // console.log(expandedKeys, item);
};
const select = (selectedKeys, item) => {
  // console.log(selectedKeys, item);
};
</script>

props

| 参数 | 说明 | 默认值 | 类型 | 注意 | | ----------------- | ------------------------------------------- | ------------------------------------------------ | ----------------- | ------------------------------------------------------------------------------------------------------ | | treeData | 树形数据 | [] | Array | - | | expandedKeys | 展开的节点 | [] | Array | expandedKeys 填写了 , defaultExpandAll 失效 | | selectedKeys | 选中的节点 | [] | Number[]/String[] | "" | | allowSelectParent | 是否可以选中父节点 | true | Boolean | 需要注意的是 当 allowSelectParent 为 true 时，选中父节点时，不会触发 select 事件，触发的是 expand 事件 | | defaultExpandAll | 是否默认展开全部节点 | false | Boolean | - | | allowMultiple | 是否多选 | false | Boolean | - | | rowKey | 指定每个节点的唯一标识 | id | String | - | | fieldNames | 自定义节点 valueKey、title、children 的字段 | {valueKey:"id",title:"name",children:"children"} | Object | - |

methods

| 事件 | 说明 | 回调参数 | 返回值 | 注意 | | ------ | -------------------------------------- | ------------------------------- | ------ | ---- | | expand | 在折叠节点时，展开节点时候，触发该事件 | function(expandedKeys, item)... | void | - | | select | 在选中节点时，展开节点时候，触发该事件 | function(selectedKeys, item)... | void | - |

slot

| 名称 | 说明 | | ----- | -------- | | arrow | 箭头图标 |