# PageSidebar 侧边栏

<h-page-container>
  <h-page-header slot="pageHeader" :breadcrumb="breadcrumb" />
  <h-layout>
    <h-page-sidebar>
      <template slot="pageSidebarAction">
        <el-button type="iconButton" icon="h-icon-add" />
        <el-button type="iconButton" icon="h-icon-edit" />
      </template>
      <el-input
        slot="pageSidebarSearch"
        v-model="treeSearchKey"
        placeholder="Information"
        suffix-icon="h-icon-search"
        clearable
      />
      <el-tree
        ref="areaTree"
        :data="treeData"
        :props="defaultProps"
        node-key="id"
        default-icon="h-icon-folder"
        :default-expanded-keys="['0']"
        current-node-key="0"
      />
    </h-page-sidebar>
  </h-layout>
</h-page-container>

<script>
  export default {
    data() {
      return {
        breadcrumb: ['Title', 'Title', 'Title', 'Title'],
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'label',
          icon: 'icon'
        },
        treeSearchKey: ''
      }
    },
    created() {
      let treeD = [];
      for (let i = 0; i < 3; i++) {
        treeD.push({
          id: `${i}`,
          label: 'Title',
          children: []
        });
        for (let j = 0; j < 4; j++) {
          treeD[i].children.push({
            id: `${i}${j}`,
            label: 'Title'
          });
        }
      }
      this.treeData = treeD;
    }
  }
</script>

<h-page-container>
  <h-page-header slot="pageHeader" :breadcrumb="breadcrumb" />
  <h-layout>
    <h-page-sidebar type="list">
      <ul>
        <li
          v-for="(item, index) in sidebar"
          :key="index"
          :class="{ active: item === activeSidebar }"
          @click="handleClick(item)"
        >
          <span>{{ item }}</span>
        </li>
      </ul>
    </h-page-sidebar>
  </h-layout>
</h-page-container>

<script>
  export default {
    data() {
      return {
        sidebar: [
          'Option1',
          'Option2',
          'Option3',
          'Option4',
          'Option5',
          'Option6',
          'Option7',
          'Option8'
        ],
        activeSidebar: 'Option1'
      }
    },
    methods: {
      handleClick(item) {
        this.activeSidebar = item;
      }
    }
  }
</script>