# antd-table

二次封装表格

# Feature

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

\-

## 样式调整

- 调整了单元格左右 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)

## 与 TableLayout 配合

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

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

## tableColumnsOperate（tco） 部件，用于扩展表格列的筛选以及排序

通过新增表格属性 table-columns-operate 对象，来激活这个功能。

激活之后，悬浮到表格表头所有单元格将会动态出现 icon，再次悬浮 icon 展示 popover，则可进行表格列的筛选以及排序。

保存之后，将会以这样子的格式存储到 localStorage（key 为 unity-tco）：

```js
[
  {
    lotId: '10086', // 车场 id
    table: [
      {
        name: 'foo', // 表格名称，唯一
        value: [
          {
            dataIndex: 'id',
            visible: 1
          },
          {
            dataIndex: 'user,name',
            visible: 1
          },
          {
            dataIndex: 'url',
            visible: 1
          },
          {
            dataIndex: 'title',
            visible: 1
          },
          {
            dataIndex: 'action',
            visible: 1
          }
        ]
      }
    ]
  }
];
```

> tips：不要对复杂表头开启这个功能

✨ 使用 JSON-Schema 的工具 [ajv](https://github.com/ajv-validator/ajv)，[ajv-keywords](https://github.com/epoberezkin/ajv-keywords) 来验证本地存储数据格式是否正确。如果本地存储的格式被手动修改，或者其他。导致不正确，将会被直接清空！

✨ 处理表格新增，修改，删除列与本地缓存的冲突比较，展示正确的表格列

### Usage

```html
<a-table
  rowKey="id"
  v-bind="VBind"
  v-on="VOn"
  :table-columns-operate="{
    exclude: ['action'],
    lotId: '10086',
    tableName: 'foo'
  }"
>
  ...
</a-table>
```

### API

Table tableColumnsOperate

| 参数         | 说明                                                                | 类型                      | 默认值     |
| ------------ | ------------------------------------------------------------------- | ------------------------- | ---------- |
| exclude      | 排除要加入操作列的 dataIndex 数组，一般为操作列（确保是在最后的列） | Array<string \| string[]> | []         |
| lotId        | 车场 Id，必填，唯一                                                 | string                    | -          |
| tableName    | tableName，必填，唯一                                               | string                    | -          |
| popoverTitle | popover 的 title                                                    | string                    | 报表列筛选 |
