# CommonPage 页脚

### 基础用法

:::demo
```vue

<template>
  <common-panel :layer="'row'">
    <template #left>
      <div class="tree">
        <common-tree
          :tree-data="treeData"
          :actions="actions"
          :is-icon="true"
        ></common-tree>
      </div>
    </template>
    <template #right>
      <div class="content">123</div>
    </template>
  </common-panel>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const treeData = ref<any>([
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1'
          }
        ]
      }
    ]
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1'
          }
        ]
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1'
          }
        ]
      }
    ]
  }
]);
function deleteFn(data: any) {
  ElMessage(data);
}
const actions = ref<any>([
  {
    label: '删除',
    name: 'common-shanchu',
    iconType: '',
    type: 'primary',
    size: 14,
    onClick: deleteFn
  }
]);
</script>
```


:::


### 配置参数

| 参数                | 说明                     | 类型             | 是否必须 |
| :------------------ | :-------------------- | :--------------- | :------- |
|layer| 页面排版，'row'时，横向布局，带收起icon  | String |false|


### 事件