# antd-table

二次封装表格

# Feature

## 可进行全局配置对话框相关属性，统一把控

\-

## 样式调整

- 调整了单元格对齐方式 left 和 right ，左右 padding 加大，看着更加协调
- 调整了单元格内部的 ant-btn-link 按钮间距
- 可全局配置表格的 head ，body 单元格水平对齐，默认列头强制居中，表格 body 单元格 left 对齐

  head 单元格如果需要个别不居中，可以使用 table [customHeaderCell](https://next.antdv.com/components/table-cn#Column) 方式自定义

  ```js
  {
    title: '操作',
    dataIndex: 'action',
    customHeaderCell(column: any) {
      return {
        class: 'text-left' // or 'text-right'
      };
    }
  }
  ```

  body 单元格如果需要个别对齐方式不一致，可以使用 antd 自带配置风格

  ```js
  {
    title: '操作',
    dataIndex: 'action',
    align:'center' // or right
  }
  ```

- loading 展示的时候不显示空状态，antd 默认下都会一起显示看起来不协调

- 重写了 sorter 的上下箭头图片，[蓝湖参考](https://lanhuapp.com/web/#/item/project/detailDetach?tid=3e189f00-e766-420d-a5d1-e963c303b08c&pid=bd06380a-47e4-4580-a1f2-5ddc62bbd6b1&project_id=bd06380a-47e4-4580-a1f2-5ddc62bbd6b1&image_id=ac0dd0ac-23e3-48ad-a8d4-8277ddfa4fc3&fromEditor=true)

- 重写 css 样式

antd 表格 body 默认使用 `overflow:scroll` 导致当数据没有溢出时，还一直存在滚动条轨迹

```css
.ant-table-body {
  overflow: auto !important;
}
```

## 与 TableLayout 配合

- 当 TableLayout 出现 drawer 时，如果是对某一确认数据行操作，则表格对应行高亮且滚动到合适区域，如果是新增或其他，则左侧无可操作区域。

- 需要确保 a-table 都必须要 row-key 属性，否则不会高亮当前操作行，[参考 row-key](https://www.antdv.com/components/table-cn#%E6%B3%A8%E6%84%8F)
