ant-design-vue/antdv-demo/docs/tree/demo/line.md

2.1 KiB

#### 连接线 带连接线的树。 #### Tree With Line Tree With Line
<template>
  <div>
    <div style="margin-bottom: 16px">
      showLine: <a-switch v-model="showLine" />
      <br />
      <br />
      showIcon: <a-switch v-model="showIcon" />
    </div>
    <a-tree
      :show-line="showLine"
      :show-icon="showIcon"
      :default-expanded-keys="['0-0-0', '0-0-1', '0-0-2']"
      @select="onSelect"
    >
      <a-icon slot="icon" type="carry-out" />
      <a-tree-node key="0-0">
        <a-icon slot="icon" type="carry-out" />
        <span slot="title" style="color: #1890ff">parent 1</span>
        <a-tree-node key="0-0-0" title="parent 1-0">
          <a-icon slot="icon" type="carry-out" />
          <a-tree-node key="0-0-0-0" title="leaf">
            <a-icon slot="icon" type="carry-out" />
          </a-tree-node>
          <a-tree-node key="0-0-0-1" title="leaf">
            <a-icon slot="icon" type="carry-out" />
          </a-tree-node>
          <a-tree-node key="0-0-0-2" title="leaf">
            <a-icon slot="icon" type="carry-out" />
          </a-tree-node>
        </a-tree-node>
        <a-tree-node key="0-0-1" title="parent 1-1">
          <a-icon slot="icon" type="carry-out" />
          <a-tree-node key="0-0-1-0" title="leaf">
            <a-icon slot="icon" type="carry-out" />
          </a-tree-node>
        </a-tree-node>
        <a-tree-node key="0-0-2" title="parent 1-2">
          <a-icon slot="icon" type="carry-out" />
          <a-tree-node key="0-0-2-0" title="leaf">
            <a-icon slot="icon" type="carry-out" />
          </a-tree-node>
          <a-tree-node key="0-0-2-1" title="leaf">
            <a-icon slot="icon" type="carry-out" />
            <a-icon slot="switcherIcon" type="form" />
          </a-tree-node>
        </a-tree-node>
      </a-tree-node>
    </a-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showLine: true,
      showIcon: false,
    };
  },
  methods: {
    onSelect(selectedKeys, info) {
      console.log('selected', selectedKeys, info);
    },
  },
};
</script>