# TableLayout

根据 UI 统一设计，封装的表格常规布局组件。

# Usage

`TableLayout` 相关组件（由于 name 过长，这里采用缩写 `Tl`）。

- Tl
- TlMain
- TlDrawer
- TlFilter
- TlFilterLeft
- TlFilterRight
- TlFilterSecond

## 注册

一般采用全局注册的方式

```ts
import TableLayout from '@kt/unity-table-layout';
app.use(TableLayout);
```

## 基本布局

```html
<tl>
  <tl-filter>
    <a-form-item>
      <a-input placeholder="姓名" v-model:value="name"></a-input>
    </a-form-item>
    <a-form-item>...</a-form-item>

    <a-button type="primary" @click="handleSearch">查询</a-button>
    <a-button>...</a-button>
  </tl-filter>

  <tl-filter-second>
    <a-input placeholder="其他" size="small"></a-input>
  </tl-filter-second>

  <tl-table>
    <a-table ...>...</a-table>
  </tl-table>
</tl>
```

> tips：tl-filter-second 内部的所有表单元素都使用 size="small"

## tl-filter 左右布局

`tl-filter` 子级被分成 `tl-filter-left` 和 `tl-filter-right` 两部分

```html
...
<tl-filter>
  <tl-filter-left>
    <a-form-item>
      <a-input placeholder="姓名" v-model:value="name"></a-input>
    </a-form-item>
    <a-form-item>...</a-form-item>
    <a-button type="primary" @click="handleSearch">查询</a-button>
    <a-button>...</a-button>
  </tl-filter-left>
  <tl-filter-right>
    <a-button type="link">导出</a-button>
  </tl-filter-right>
</tl-filter>
...
```

## 带有 drawer 的布局

`tl` 子级被分成 `tl-main` 和 `tl-drawer` 两部分

```html
<tl
  v-model:drawer="drawer.visible"
  :title-index="drawer.titleIndex"
  :button-index="drawer.buttonInndex"
>
  <tl-main>
    <tl-filter>
      <a-form-item>
        <a-input placeholder="姓名" v-model:value="name"></a-input>
      </a-form-item>
      <a-form-item>...</a-form-item>

      <a-button type="primary" @click="handleSearch">查询</a-button>
      <a-button>...</a-button>
    </tl-filter>

    <tl-filter-second>
      <a-input placeholder="其他" size="small"></a-input>
    </tl-filter-second>

    <tl-table>
      <a-table ...>...</a-table>
    </tl-table>
  </tl-main>
  <tl-drawer :title="drawer.title" :spin="{ spinning: drawer.spinning }">
    <template #buttons>
      <a-button type="primary" size="small" @click="handleConfirm">
        修改
      </a-button>
      <a-button size="small" @click="drawer.visible = false">返回</a-button>
    </template>
  </tl-drawer>
</tl>
```

> tips：tl-drawer 的 buttons 插槽，内部的所有按钮都使用 size="small"

# API

## TableLayout

| 参数            | 说明                                 | 类型           | 默认值 |
| --------------- | ------------------------------------ | -------------- | ------ |
| fixed           | 开启固定模式，<br>表格 body 开启滚动 | boolean        | true   |
| drawer(v-model) | 是否显示右侧抽屉                     | boolean        | false  |
| titleIndex      | 表格的标题列索引                     | number         | 0      |
| actionIndex     | 表格的操作列索引                     | number\|string | 'last' |
| buttonIndex     | 表格的操作列按钮索引                 | number         | -1     |

## TableLayoutDrawer

| 参数  | 说明                                                             | 类型           | 默认值 |
| ----- | ---------------------------------------------------------------- | -------------- | ------ |
| title | drawer 标题                                                      | string \| slot | ''     |
| spin  | 参考 [antd 官网 spin](https://next.antdv.com/components/spin-cn) | object         | -      |

## TableLayoutDrawer Slots

| 插槽名称 | 说明                            | 参数 |
| -------- | ------------------------------- | ---- |
| title    | 抽屉标题                        | -    |
| buttons  | 抽屉顶部按钮组                  | -    |
| default  | 默认插槽，一般放置表单/详情展示 | -    |

# 蓝湖参考

- [表格左右布局形式](https://lanhuapp.com/web/#/item/project/detailDetach?pid=ff997f2c-0ea3-4901-8f3a-49f76a11e747&project_id=ff997f2c-0ea3-4901-8f3a-49f76a11e747&image_id=c1241130-6f6c-406a-ad20-8861d361852b&fromEditor=true)

# FAQ

\-
