更新记录

1.0.2（2024-07-11）

增加vue2适配

1.0.1（2024-07-08）

文档更新

1.0.0（2024-07-08）

新建

平台兼容性

ev-tree

功能说明：

1. 理论上支持大数据量
2. 支持子节点按需渲染配置
3. 支持单选多选配置
4. 支持父节点是否可选配置
5. 支持手风琴模式配置（每次只展开一个同级树节点）
6. 支持父子节点是否相互关联配置
7. 支持样式自定义，提供插槽
8. 支持异步加载子节点
9. 支持配置主题色
10. 支持vue2+3
11. 提供方法设置目前选中的节点（支持配置是否自动打开父节点）
12. 提供方法设置节点是否被选中（支持配置是否自动打开父节点）
13. 提供方法展开或关闭指定节点
14. 提供方法展开或关闭所有节点
15. 提供节点点击事件监听（包含打开/关闭，选中/取消选中

调用示例

<view class="content">
    <view class="operate-button" style="overflow-y: scroll">
      <view class="" style="padding: 20rpx 0; text-align: center">
        <text>操作列表</text>
      </view>
      <view>
        <checkbox :checked="accordion" @click="accordion = !accordion" />
        <text>手风琴模式</text>
      </view>
      <view>
        <checkbox :checked="multipe" @click="multipe = !multipe" />
        <text>多选</text>
      </view>
      <view>
        <checkbox :checked="showCheckBox" @click="showCheckBox = !showCheckBox" />
        <text>展示多选框</text>
      </view>
      <view>
        <checkbox :checked="selectParent" @click="selectParent = !selectParent" />
        <text>父节点可选</text>
      </view>
      <view>
        <checkbox :checked="lazy" @click="lazy = !lazy" :disabled="true" />
        <text>懒加载子节点</text>
      </view>
      <view>
        <checkbox :checked="checkStrictly" @click="checkStrictly = !checkStrictly" />
        <text>父子节点是否不相关联</text>
      </view>
      <button @click="openAllNodes" type="warn">打开所有</button>
      <button @click="openNodes([2, 3002])">打开3002、2</button>
      <button @click="closeAllNodes" type="warn">关闭所有</button>
      <button @click="closeNodes([3002, 2])">关闭3002、2</button>
      <button @click="setCurrentKeys([3002, 2001])" type="primary">仅选中3002、2001</button>
      <button @click="setCurrentKeys(1001)" type="primary">仅选中1001</button>

      <button @click="setChecked(3004, true)" type="primary">选中3004</button>
      <button @click="setChecked(3004, false)" type="primary">取消选中3004</button>

      <view class="mt-20">
        <text style="color: red">注意事项：\n</text>
        <text>1. lazy为true时，无法打开未渲染的节点）</text>
      </view>

      <view class="mt-20">
        <text style="word-break: break-all">已选中的节点：{{ JSON.stringify(actives) }}</text>
      </view>
      <view>
        <text style="word-break: break-all">半选中的节点：{{ JSON.stringify(halfActives) }}</text>
      </view>
    </view>
    <view style="overflow-y: scroll; height: 100%; flex: 1">
      <ev-tree
        ref="treeRef"
        :list="list"
        :props="{ children: 'children', label: 'name', key: 'id' }"
        @nodeClick="clickCate"
        mainColor="#ffaa00"
        :accordion="accordion"
        :multipe="multipe"
        :showCheckBox="showCheckBox"
        :selectParent="selectParent"
        :lazy="lazy"
        :checkStrictly="checkStrictly"
      >
        <!-- 插槽示例-->
        <!-- <template v-slot="{ node, list }">
          <view>{{ node?.name }}-{{ node?.id }}</view>
          <view @click.stop= "deleteNode(node)" style="color:#ffaa00">删除</view>
        </template> -->
      </ev-tree>
    </view>
  </view>
</template>

<script>
import { data } from './data.js';
const lazy = true;
export default {
  data() {
    return {
      title: 'Hello',
      list: [],
      accordion: false, //手风琴模式
      multipe: false, // 多选
      showCheckBox: false, // 展示多选框
      selectParent: false, // 父节点可选
      checkStrictly: false, // 父子节点不关联
      lazy: false, // 懒加载
      actives: [],
      halfActives: []
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    async getList() {
      // 模拟调用接口
      uni.showLoading({ title: '模拟接口调用...' });
      await this.sleep(300);
      uni.hideLoading();
      this.list = data;
    },
    clickCate(node, type) {
      if (type === 'open') {
        console.log('打开节点', node);
      } else if (type === 'close') {
        console.log('关闭节点', node);
      } else if (type === 'checked') {
        console.log('选中节点', node);
      } else if (type === 'unchecked') {
        console.log('取消选中节点', node);
      }
      this.getCheckedKeys();
      this.getHalfCheckedKeys();
    },
    setCurrentKeys(arg) {
      this.$refs.treeRef.setCurrentKeys(arg);
    },
    openNodes(arg) {
      this.$refs.treeRef.openCurrentKeys(arg);
    },
    closeNodes(arg) {
      this.$refs.treeRef.closeCurrentKeys(arg);
    },
    openAllNodes() {
      this.$refs.treeRef.openAllKeys();
    },
    closeAllNodes() {
      this.$refs.treeRef.closeAllKeys();
    },
    getCheckedKeys() {
      this.actives = this.$refs.treeRef.getCheckedKeys();
    },
    getHalfCheckedKeys() {
      this.halfActives = this.$refs.treeRef.getHalfCheckedKeys();
    },
    setChecked(arg, status) {
      this.$refs.treeRef.setChecked(arg, status);
    },
    sleep(time) {
      return new Promise((resolve) => setTimeout(resolve, time));
    },
    deleteNode(node) {
      console.log('删除事件', node);
    }
  }
};
</script>

可选参数

ev-tree参数

props参数：

方法：

事件：

Scoped Slot插槽说明