Vue3+iview tree组件 实现根据左侧树实现右侧不同可更改页面的 demo

好的，下面是一个简单的示例代码：

<template>
  <div class="tree-demo">
    <Row>
      <Col span="6">
        <Tree :data="treeData" @on-select-change="handleSelectChange" />
      </Col>
      <Col span="18">
        <div v-if="selectedNode">
          <div>{{ selectedNode.label }}</div>
          <div>
            <Button type="primary" @click="selectedNode.label = '修改后的内容'">
              修改选中节点内容
            </Button>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import { reactive } from 'vue';
import { Row, Col, Tree, Button } from 'iview';

export default {
  components: {
    Row,
    Col,
    Tree,
    Button,
  },

  setup() {
    const treeData = reactive([
      {
        title: '节点1',
        key: '1',
        children: [
          {
            title: '子节点1',
            key: '1-1',
          },
          {
            title: '子节点2',
            key: '1-2',
          },
        ],
      },
      {
        title: '节点2',
        key: '2',
        children: [
          {
            title: '子节点3',
            key: '2-1',
          },
          {
            title: '子节点4',
            key: '2-2',
          },
        ],
      },
    ]);

    const selectedNode = reactive(null);

    const handleSelectChange = (selectedKeys) => {
      if (selectedKeys.length > 0) {
        const [key] = selectedKeys;
        const node = findNodeByKey(treeData, key);
        selectedNode.label = node.title;
      } else {
        selectedNode.label = null;
      }
    };

    const findNodeByKey = (nodes, key) => {
      for (const node of nodes) {
        if (node.key === key) {
          return node;
        } else if (node.children) {
          const foundNode = findNodeByKey(node.children, key);
          if (foundNode) {
            return foundNode;
          }
        }
      }
      return null;
    };

    return {
      treeData,
      selectedNode,
      handleSelectChange,
    };
  },
};
</script>

这个示例演示了如何使用 iview 的 Tree 组件实现左侧树，当点击树节点时，右侧会显示选中节点的内容，并且提供一个按钮来修改该内容。在这个示例中，我们使用了 Vue 3 的 Composition API 来管理状态。当然，你也可以使用传统的 Options API 来完成相同的功能。