【fix 66426】JTable拖拽效果案例及md文档
This commit is contained in:
danshihao
@@ -0,0 +1,216 @@
|
||||
# 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`拖拽后会把最新的总宽度同步
|
||||
|
||||
|
||||
### 对原ATable的使用有哪些限制
|
||||
|
||||
- 操作列的`dataIndex`或`key`必须为`action`
|
||||
- 带有设置的列不能使用`scopedSlots.filterIcon` 和 `scopedSlots.filterDropdown`
|
||||
- `scroll.x`和`width`必须是数字，不支持百分比
|
||||
|
||||
### 注意事项
|
||||
|
||||
- 固定头和列（ant-design-vue自带的问题） ：若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。
|
||||
建议指定 scroll.x 为大于表格宽度的固定值。注意，且非固定列宽度之和不要超过 `scroll.x`。
|
||||
- `table-key`该属性为全局每个表的唯一属性，建议使用路由+命名的方式，如[示例](#示例)中设置
|
||||
|
||||
## 示例
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<a-button @click="resetTable">重置表格配置</a-button>
|
||||
<a-button @click="clearTableCache">清空本表缓存</a-button>
|
||||
<a-button @click="clearAllTableCache">清空全局JTable缓存</a-button>
|
||||
<j-table bordered
|
||||
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
||||
:table-key="$route.name + '_table'"
|
||||
ref="table"
|
||||
rowKey="key"
|
||||
:data-source="dataSource"
|
||||
:scroll.sync="scroll"
|
||||
:columns.sync="columns">
|
||||
|
||||
<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>
|
||||
</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
|
||||
},
|
||||
{
|
||||
resizable: true, // 可拖拽属性
|
||||
title: 'Amount',
|
||||
dataIndex: 'amount',
|
||||
minWidth: 100,
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: 'Type',
|
||||
dataIndex: 'type',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: 'Note',
|
||||
dataIndex: 'note'
|
||||
// 保留一列自适应
|
||||
// width: 100
|
||||
},
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
// filterIcon 和 filterDropdown 不能使用
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
const dataSource = [
|
||||
{
|
||||
key: 0,
|
||||
date: '2018-02-11',
|
||||
amount: 120,
|
||||
type: 'income',
|
||||
note: 'transfer'
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
date: '2018-03-11',
|
||||
amount: 243,
|
||||
type: 'income',
|
||||
note: 'transfer'
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
date: '2018-04-11',
|
||||
amount: 98,
|
||||
type: 'income',
|
||||
note: 'transfer'
|
||||
}
|
||||
]
|
||||
return {
|
||||
scroll: { x: 1000 },
|
||||
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>
|
||||
```
|
||||
Reference in New Issue
Block a user