Skip to content

A
ant-design-pro-vue
Unverified Commit 10dc997e by Sendya
Options

refactor: s-table

parent 5ef74ece
Showing with 119 additions and 114 deletions
src/components/table/README.md
......@@ -21,10 +21,11 @@ Table 重封装组件说明
<template>
<s-table
ref="table"
:rowKey="(record) => record.data.id"
size="default"
:rowKey="(record) => record.data.id"
:columns="columns"
:data="loadData"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
>
</s-table>
</template>
......@@ -75,6 +76,14 @@ Table 重封装组件说明
return res.result
})
},
selectedRowKeys: [],
selectedRows: []
}
},
methods: {
onSelectChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
}
}
}
......@@ -195,6 +204,15 @@ Table 重封装组件说明
> 注意：要调用 `refresh()` 需要给表格组件设定 `ref` 值
内置属性
----
> 除去 `a-table` 自带属性外，还而外提供了 `alert` `props` 属性
```javascript
alert: {
show: Boolean,
clear: [Function, Boolean]
}
```
注意事项
----
......@@ -202,7 +220,7 @@ Table 重封装组件说明
> 你可能需要为了与后端提供的接口返回结果一致而去修改以下代码：
(需要注意的是，这里的修改是全局性的，意味着整个项目所有使用该 table 组件都需要遵守这个返回结果定义的字段。)
修改 `@/components/table/index.js` 第 106 行起
修改 `@/components/table/index.js` 第 124 行起
......@@ -214,10 +232,19 @@ result.then(r => {
showSizeChanger: this.showSizeChanger,
pageSize: (pagination && pagination.pageSize) ||
this.localPagination.pageSize
});
})
// 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
if (r.data.length == 0 && this.localPagination.current != 1) {
this.localPagination.current--
this.loadData()
return
}
// 这里用于判断接口是否有返回 r.totalCount 或 this.showPagination = false
// 当情况满足时，表示数据不满足分页大小，关闭 table 分页功能
!r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)
this.localDataSource = r.data; // 返回结果中的数组数据
this.localDataSource = r.data // 返回结果中的数组数据
this.localLoading = false
});
```
......
src/components/table/index.js
import T from 'ant-design-vue/es/table/Table'
import get from 'lodash.get'
export default {
data() {
return {
......@@ -38,8 +39,14 @@ export default {
type: String,
default: 'default'
},
/**
* {
* show: true,
* clear: Function
* }
*/
alert: {
type: Object,
type: [Object, Boolean],
default: null
},
/** @Deprecated */
......@@ -57,7 +64,7 @@ export default {
name: this.$route.name,
params: Object.assign({}, this.$route.params, {
pageNo: val
}),
})
})
},
pageNum(val) {
......@@ -66,13 +73,11 @@ export default {
})
},
pageSize(val) {
console.log('pageSize:', val)
Object.assign(this.localPagination, {
pageSize: val
})
},
showSizeChanger(val) {
console.log('showSizeChanger', val)
Object.assign(this.localPagination, {
showSizeChanger: val
})
......@@ -142,15 +147,20 @@ export default {
const totalList = []
columns && columns instanceof Array && columns.forEach(column => {
if (column.needTotal) {
totalList.push({ ...column,
totalList.push({
...column,
total: 0
})
}
})
return totalList
},
/**
* 用于更新已选中的列表数据 total 统计
* @param selectedRowKeys
* @param selectedRows
*/
updateSelect(selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
const list = this.needTotalList
this.needTotalList = list.map(item => {
......@@ -162,123 +172,91 @@ export default {
}, 0)
}
})
// this.$emit('change', selectedRowKeys, selectedRows)
},
updateEdit() {
this.selectedRows = []
},
onClearSelected() {
this.selectedRowKeys = []
/**
* 清空 table 已选中项
*/
clearSelected () {
if (this.rowSelection) {
this.rowSelection.onChange([], [])
this.updateSelect([], [])
},
renderMsg(h) {
const _vm = this
const d = []
// 构建 已选择
d.push(
h('span', {
style: {
marginRight: '12px'
}
}, ['已选择 ', h('a', {
style: {
fontWeight: 600
}
}, this.selectedRows.length)])
},
/**
* 处理交给 table 使用者去处理 clear 事件时，内部选中统计同时调用
* @param callback
* @returns {*}
*/
renderClear (callback) {
return (
<a style="margin-left: 24px" onClick={() => {
callback()
this.clearSelected()
}}>清空</a>
)
// 构建 列统计
this.needTotalList.map(item => {
d.push(h('span', {
style: {
marginRight: '12px'
}
},
[
`${ item.title }总计 `,
h('a', {
style: {
fontWeight: 600
}
}, `${ !item.customRender ? item.total : item.customRender(item.total) }`)
]))
renderAlert () {
// 绘制统计列数据
const needTotalItems = this.needTotalList.map((item) => {
return (<span style="margin-right: 12px">
{item.title}总计 <a style="font-weight: 600">{!item.customRender ? item.total : item.customRender(item.total)}</a>
</span>)
})
// 构建 清空选择
d.push(h('a', {
style: {
marginLeft: '24px'
},
on: {
click: _vm.onClearSelected
}
}, '清空'))
// 绘制 清空 按钮
const clearItem = (typeof this.alert.clear === 'boolean' && this.alert.clear) ? (
this.renderClear(this.clearSelected)
) : (this.alert !== null && typeof this.alert.clear === 'function') ? (
this.renderClear(this.alert.clear)
) : null
return d
},
renderAlert(h) {
return h('span', {
slot: 'message'
}, this.renderMsg(h))
},
// 绘制 alert 组件
return (
<a-alert showIcon={true} style="margin-bottom: 16px">
<template slot="message">
<span style="margin-right: 12px">已选择: <a style="font-weight: 600">{this.selectedRows.length}</a></span>
{needTotalItems}
{clearItem}
</template>
</a-alert>
)
}
},
render(h) {
const _vm = this
const props = {},
localKeys = Object.keys(this.$data)
render() {
const props = {}
const localKeys = Object.keys(this.$data)
const showAlert = (typeof this.alert === 'object' && this.alert !== null && this.alert.show) || this.alert
Object.keys(T.props).forEach(k => {
const localKey = `local${k.substring(0,1).toUpperCase()}${k.substring(1)}`
const localKey = `local${k.substring(0, 1).toUpperCase()}${k.substring(1)}`
if (localKeys.includes(localKey)) {
return props[k] = _vm[localKey]
return props[k] = this[localKey]
}
return props[k] = _vm[k]
})
// 显示信息提示
if (this.showAlertInfo) {
props.rowSelection = {
selectedRowKeys: this.selectedRowKeys,
if (showAlert && k === 'rowSelection') {
// 重新绑定 rowSelection 事件
return props[k] = {
selectedRowKeys: this[k].selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
_vm.updateSelect(selectedRowKeys, selectedRows)
_vm.$emit('onSelect', { selectedRowKeys: selectedRowKeys, selectedRows: selectedRows })
this.updateSelect(selectedRowKeys, selectedRows)
this[k].onChange(selectedRowKeys, selectedRows)
}
}
return h('div', {}, [
h('a-alert', {
style: {
marginBottom: '16px'
},
props: {
type: 'info',
showIcon: true
}
}, [_vm.renderAlert(h)]),
h('a-table', {
tag: 'component',
attrs: props,
on: {
change: _vm.loadData
},
scopedSlots: this.$scopedSlots
}, this.$slots.default)
])
}
return props[k] = this[k]
})
return h('a-table', {
tag: 'component',
attrs: props,
on: {
change: _vm.loadData
},
scopedSlots: this.$scopedSlots
}, this.$slots.default)
const table = (
<a-table {...{ props, scopedSlots: {...this.$scopedSlots}}} onChange={this.loadData}>
{this.$slots.default}
</a-table>
)
return (
<div class="table-wrapper">
{ showAlert ? this.renderAlert() : null }
{ table }
</div>
)
}
}
\ No newline at end of file
src/views/list/TableList.vue
......@@ -80,8 +80,8 @@
size="default"
:columns="columns"
:data="loadData"
:showAlertInfo="true"
@onSelect="onChange"
:alert="{ show: true, clear: () => { this.selectedRowKeys = [] } }"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
>
<span slot="action" slot-scope="text, record">
<template v-if="$auth('table.update')">
......@@ -271,11 +271,10 @@
handleOk () {
},
onChange (row) {
this.selectedRowKeys = row.selectedRowKeys
this.selectedRows = row.selectedRows
console.log(this.$refs.table)
onSelectChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
},
toggleAdvanced () {
this.advanced = !this.advanced
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment