Tree 树形组件 #

<template>
  <div>
    <Row>
      <Col span="4">
        <Tree checked :data="the.tree.list" @onEvent="onTreeEvent" />
      </Col>
      <Col span="20">
        <div>{{ the.tree.onItem.id }}{{ the.tree.onItem.title }}</div>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  setup() {
    // 使用外挂方式引入，具体查看demo
    const $plus = window.$plus;
    const { reactive } = $plus.vue;
    const { bll } = $plus.quick;

    const the = reactive({
      tree: {
        // 当前点击节点
        onItem: {},
        // 勾选数组
        onChecks: [],
        // 节点数据列表
        list: [
          {
            title: '组织',
            id: 1,
          },
          {
            title: '角色',
            id: 2,
            children: [
              {
                id: 21,
                title: '人民',
              },
              {
                id: 22,
                title: '群众',
              },
            ],
          },
        ],
      },
    });

    /** 树点击事件 */
    const onTreeEvent = (resp) => {
      console.log('onTreeEvent', resp.item);
      switch (resp.cmd) {
        case 'open':
          getTree(resp.bind, resp.item);
          break;
        case 'click':
          the.tree.onItem = resp.item;
          break;
        case 'check':
          //勾选
          if (resp.checked) {
            // 添加新的
            the.tree.onChecks.push(resp.value);
          } else {
            // 取消勾选
            bll.array.del(the.tree.onChecks, resp.value);
          }
          console.log('onTreeEvent.check', resp);
          break;
      }
    };

    return { the, onTreeEvent };
  },
};
</script>