# JTable 支持列自定义及可拖拽列宽的表格

## JTable参数配置
| 参数           | 类型     | 必填  | 说明                                                             |
|--------------|--------|-----|----------------------------------------------------------------|
| tableKey      | String | ✔   | 全局`JTable`唯一，持久化存储自定义列配置                                       |
| columns      | Array  | ✔   | **需要配合`.sync`获取最新的数据**，具体项见下表                                  |
| settingStyle      | Object |     | 自定义列配置表的样式                                                     |
| settingScroll      | Object |     | 自定义列配置表的滚动配置                                                   |
| scroll      | Object |     | 表格滚动配置，建议使用拖拽属性`resizable`时设置`scroll.x`，**需要配合`.sync`获取最新的数据** |
| columnMinWidth      | Number |     | 所有列共用的最小宽度，在没有`width`和`minWidth`时的冻结列和拖拽列的最小宽度                 |

## columns参数配置
| 参数                | 类型             | 必填 | 说明                             |
|-------------------|----------------|----|--------------------------------|
| hideSettingColumn | Boolean        |    | 是否在自定义列配置表中隐藏                  |
| disabledHide      | Boolean        |    | 是否禁用自定义列配置表中的隐藏复选框             |
| disabledFreeze    | Boolean        |    | 是否禁用自定义列配置表中的冻结复选框             |
| fixed             | String、Boolean |    | 默认的冻结列，只能为`true`或`'left'`其他不生效 |
| width             | Number         |    | 列宽，只能是数字                       |
| minWidth          | Number         |    | 最小列宽，只能是数字，在冻结列和拖拽列时生效         |
| resizable         | Boolean        |    | 是否启用拖拽，需要表格显示边框`bordered`      |

## JTable的方法

### clearAllCacheSetting

用于清理所有JTable的缓存

- `参数:` 无
- `返回值:` 无

### clearSetting

用于清理当前表的缓存

- `参数:` 无
- `返回值:` 无

### resteColumns

还原初始的配置

- `参数:` 无
- `返回值:` 无


## FAQ

### 方法如何调用？

在[示例](#示例)中，设定了一个 `ref="table"` 的属性，那么在vue中就可以使用`this.$refs.table`获取到该表格的实例，并调取其中的方法。
假如我要调取`resteColumns`方法，就可以这么写：`this.$refs.table.resteColumns()`

### `columns`和`scroll`为什么要使用`.sync`

保证父组件和子组件数据同步

`columns`自定义列配置后会同步,
`scroll`拖拽后会把最新的总宽度同步


### 对原`a-table`的使用有哪些限制

 - 操作列的`dataIndex`或`key`必须为`action`
 - 带有设置的列不能使用`scopedSlots.filterIcon` 和 `scopedSlots.filterDropdown`(没有操作列时，设置在最后一列)
 - `scroll.x`和`width`必须是数字，不支持百分比
 - 使用作用域插槽，需要使用解构赋值，里面有三个参数`{text, record, index}`，可参考[示例](#示例)写法

### 拖拽后没有设置宽度的列会被缩小

 - 设置scroll.x配置一个默认宽度即可

### 出现空白列

 - 设置至少一列没有width（没有width不能被拖拽）
 - 建议没有`width`的列不能手动控制隐藏和冻结，使用`disabledHide`和`disabledFreeze`或者`hideSettingColumn`

### `resizable`没有效果

 - 需要设置`resizable: true`，要有`width`，且不能有`fixed`

### 自定义列的弹框会消失

 - 因为冻结列的出现或消失会刷新表格结构导致弹框丢失
 - 设置一个冻结列始终存在，不可被手动控制隐藏和取消冻结即可

### 注意事项

 - `table-key`该属性为全局每个表的唯一属性，建议使用路由+命名的方式，如[示例](#示例)中设置
 - 固定头和列（ant-design-vue自带的问题） ：若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。
   建议指定 scroll.x 为大于表格宽度的固定值。注意，且非固定列宽度之和不要超过 `scroll.x`。

## 示例

```vue
<template>
    <div>
      <div style="margin-bottom: 5px;">
        <a-button @click="resetTable">重置表格配置</a-button>
        <a-button @click="clearTableCache" style="margin-left: 5px;">清空本表缓存</a-button>
        <a-button @click="clearAllTableCache" style="margin-left: 5px;">清空全局JTable缓存</a-button>
      </div>
      <j-table  bordered
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                :table-key="$route.name + '_table1'"
                ref="table"
                rowKey="key"
                :data-source="dataSource"
                :scroll.sync="scroll"
                :columns.sync="columns">
        <!--  使用插槽  -->
        <a slot="name" slot-scope="{text}">{{ text }}</a>
        <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
        <span slot="tags" slot-scope="{text: tags}">
        <a-tag
          v-for="tag in tags"
          :key="tag"
          :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
        >
          {{ tag.toUpperCase() }}
        </a-tag>
        </span>

        <span slot="action" slot-scope="{record}">
          <a-popconfirm
            v-if="dataSource.length"
            title="是否删除?"
            @confirm="() => onDelete(record.key)"
          >
          <a href="javascript:">Delete</a>
        </a-popconfirm>
        </span>

        <template slot="footer" slot-scope="currentPageData">
          Footer：{{ currentPageData }}
        </template>
      </j-table>
    </div>
</template>

<script>
import JTable from '@comp/jero/JTable'

export default {
  name: 'Demo',
  components: { JTable },
  data () {
    const columns = [
      {
        // 是否在配置表中隐藏
        // hideSettingColumn: true,
        // 尽量都设置最小宽度，冻结列与拖拽时生效
        minWidth: 100,
        width: 100,
        // 禁用配置表中的隐藏或冻结
        disabledHide: true,
        disabledFreeze: true,
        // 可拖拽属性（不能fixed一起用）
        // resizable: true,
        // 默认冻结，值可以是 'left' 或 true
        fixed: true,
        title: '#',
        ellipsis: true,
        dataIndex: 'key'
      },
      {
        resizable: true,
        title: 'Date',
        dataIndex: 'date',
        width: 200
      },
      {
        // 标题使用插槽使用这个代替title（用于设置里显示列名）
        columnTitle: 'Name',
        dataIndex: 'name',
        key: 'name',
        slots: { title: 'customTitle' },
        scopedSlots: { customRender: 'name' }
      },
      {
        title: 'Tags',
        key: 'tags',
        dataIndex: 'tags',
        scopedSlots: { customRender: 'tags' }
      },
      {
        resizable: true, // 可拖拽属性
        title: 'Amount',
        dataIndex: 'amount',
        minWidth: 100,
        width: 100
      },
      {
        title: 'Type',
        dataIndex: 'type',
        width: 100
      },
      {
        title: 'Note',
        dataIndex: 'note',
        // 保留一列自适应
        // width: 100
        // 建议：没有宽度的列至少一列禁止自定义（解决冻结或隐藏列导致出现空列）
        // disabledHide: true,
        // disabledFreeze: true,
        hideSettingColumn: true
      },
      {
        title: 'Action',
        key: 'action',
        width: 200,
        // filterIcon 和 filterDropdown 不能使用
        scopedSlots: { customRender: 'action' }
      }
    ]
    const dataSource = [
      {
        key: 0,
        name: 'John Brown',
        tags: ['nice', 'developer'],
        date: '2018-02-11',
        amount: 120,
        type: 'income',
        note: 'transfer'
      },
      {
        key: 1,
        name: 'Jim Green',
        tags: ['loser'],
        date: '2018-03-11',
        amount: 243,
        type: 'income',
        note: 'transfer'
      },
      {
        key: 2,
        name: 'Joe Black',
        tags: ['cool', 'teacher'],
        date: '2018-04-11',
        amount: 98,
        type: 'income',
        note: 'transfer'
      }
    ]
    return {
      scroll: { x: 1400 },
      columns: columns,
      dataSource: dataSource,
      selectedRowKeys: []
    }
  },
  methods: {
    // 还原表格初始配置
    resetTable () {
      this.$refs.table.resteColumns()
    },
    // 清除当前表格缓存
    clearTableCache () {
      this.$refs.table.clearSetting()
    },
    // 清除所有缓存
    clearAllTableCache () {
      this.$refs.table.clearAllCacheSetting()
    },
    onDelete (key) {
      this.$message.info(`del:${key}`)
    },
    onSelectChange (selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    }
  }
}
</script>
```