Skip to content

A
ant-design-pro-vue
Commit 5f242ada by Sendya
Options

feat: s-table size prop

parent c5a50470
Showing with 274 additions and 264 deletions
src/components/table/index.js
import T from 'ant-design-vue/es/table/Table' import T from 'ant-design-vue/es/table/Table'
import get from 'lodash.get' import get from 'lodash.get'
export default { export default {
data() { data() {
return { return {
needTotalList: [], needTotalList: [],
selectedRows: [], selectedRows: [],
selectedRowKeys: [], selectedRowKeys: [],
localLoading: false, localLoading: false,
localDataSource: [], localDataSource: [],
localPagination: Object.assign({}, T.props.pagination) localPagination: Object.assign({}, T.props.pagination)
} }
}, },
props: Object.assign({}, T.props, { props: Object.assign({}, T.props, {
rowKey: { rowKey: {
type: [String, Function], type: [String, Function],
default: 'id' default: 'id'
}, },
data: { data: {
type: Function, type: Function,
required: true required: true
}, },
pageNum: { pageNum: {
type: Number, type: Number,
default: 1 default: 1
}, },
pageSize: { pageSize: {
type: Number, type: Number,
default: 10 default: 10
}, },
showSizeChanger: { showSizeChanger: {
type: Boolean, type: Boolean,
default: true default: true
}, },
showAlertInfo: { size: {
type: Boolean, type: String,
default: false default: 'default'
}, },
showPagination: { alert: {
default: 'auto' type: Object,
} default: null
}), },
watch: { /** @Deprecated */
'localPagination.current'(val) { showAlertInfo: {
this.$router.push({ type: Boolean,
name: this.$route.name, default: false
params: Object.assign({}, this.$route.params, { },
pageNo: val showPagination: {
}), default: 'auto'
}) }
}, }),
pageNum(val) { watch: {
Object.assign(this.localPagination, { 'localPagination.current'(val) {
current: val this.$router.push({
}) name: this.$route.name,
}, params: Object.assign({}, this.$route.params, {
pageSize(val) { pageNo: val
console.log('pageSize:', val) }),
Object.assign(this.localPagination, { })
pageSize: val },
}) pageNum(val) {
}, Object.assign(this.localPagination, {
showSizeChanger(val) { current: val
console.log('showSizeChanger', val) })
Object.assign(this.localPagination, { },
showSizeChanger: val pageSize(val) {
}) console.log('pageSize:', val)
} Object.assign(this.localPagination, {
}, pageSize: val
created() { })
this.localPagination = ['auto', true].includes(this.showPagination) && Object.assign({}, this.localPagination, { },
current: this.pageNum, showSizeChanger(val) {
pageSize: this.pageSize, console.log('showSizeChanger', val)
showSizeChanger: this.showSizeChanger Object.assign(this.localPagination, {
}) showSizeChanger: val
this.needTotalList = this.initTotalList(this.columns) })
this.loadData() }
}, },
methods: { created() {
refresh() { this.localPagination = ['auto', true].includes(this.showPagination) && Object.assign({}, this.localPagination, {
this.loadData() current: this.pageNum,
}, pageSize: this.pageSize,
loadData(pagination, filters, sorter) { showSizeChanger: this.showSizeChanger
})
this.localLoading = true this.needTotalList = this.initTotalList(this.columns)
var result = this.data( this.loadData()
Object.assign({ },
pageNo: (pagination && pagination.current) || methods: {
this.localPagination.current, refresh() {
pageSize: (pagination && pagination.pageSize) || this.loadData()
this.localPagination.pageSize },
}, loadData(pagination, filters, sorter) {
(sorter && sorter.field && {
sortField: sorter.field this.localLoading = true
}) || {}, var result = this.data(
(sorter && sorter.order && { Object.assign({
sortOrder: sorter.order pageNo: (pagination && pagination.current) ||
}) || {}, { this.localPagination.current,
...filters pageSize: (pagination && pagination.pageSize) ||
} this.localPagination.pageSize
) },
) (sorter && sorter.field && {
sortField: sorter.field
if (result instanceof Promise) { }) || {},
result.then(r => { (sorter && sorter.order && {
this.localPagination = Object.assign({}, this.localPagination, { sortOrder: sorter.order
current: r.pageNo, // 返回结果中的当前分页数 }) || {}, {
total: r.totalCount, // 返回结果中的总记录数 ...filters
showSizeChanger: this.showSizeChanger, }
pageSize: (pagination && pagination.pageSize) || )
this.localPagination.pageSize )
})
if (result instanceof Promise) {
!r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false) result.then(r => {
this.localDataSource = r.data // 返回结果中的数组数据 this.localPagination = Object.assign({}, this.localPagination, {
this.localLoading = false current: r.pageNo, // 返回结果中的当前分页数
}) total: r.totalCount, // 返回结果中的总记录数
} showSizeChanger: this.showSizeChanger,
}, pageSize: (pagination && pagination.pageSize) ||
initTotalList(columns) { this.localPagination.pageSize
const totalList = [] })
columns && columns instanceof Array && columns.forEach(column => {
if (column.needTotal) { !r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)
totalList.push({ ...column, this.localDataSource = r.data // 返回结果中的数组数据
total: 0 this.localLoading = false
}) })
} }
}) },
return totalList initTotalList(columns) {
}, const totalList = []
updateSelect(selectedRowKeys, selectedRows) { columns && columns instanceof Array && columns.forEach(column => {
this.selectedRowKeys = selectedRowKeys if (column.needTotal) {
this.selectedRows = selectedRows totalList.push({ ...column,
const list = this.needTotalList total: 0
this.needTotalList = list.map(item => { })
return { }
...item, })
total: selectedRows.reduce((sum, val) => { return totalList
const total = sum + get(val, item.dataIndex) },
return isNaN(total) ? 0 : total updateSelect(selectedRowKeys, selectedRows) {
}, 0) this.selectedRowKeys = selectedRowKeys
} this.selectedRows = selectedRows
}) const list = this.needTotalList
// this.$emit('change', selectedRowKeys, selectedRows) this.needTotalList = list.map(item => {
}, return {
updateEdit() { ...item,
this.selectedRows = [] total: selectedRows.reduce((sum, val) => {
}, const total = sum + get(val, item.dataIndex)
onClearSelected() { return isNaN(total) ? 0 : total
this.selectedRowKeys = [] }, 0)
this.updateSelect([], []) }
}, })
renderMsg(h) { // this.$emit('change', selectedRowKeys, selectedRows)
const _vm = this },
const d = [] updateEdit() {
// 构建 已选择 this.selectedRows = []
d.push( },
h('span', { onClearSelected() {
style: { this.selectedRowKeys = []
marginRight: '12px' this.updateSelect([], [])
} },
}, ['已选择 ', h('a', { renderMsg(h) {
style: { const _vm = this
fontWeight: 600 const d = []
} // 构建 已选择
}, this.selectedRows.length)]) d.push(
) h('span', {
style: {
// 构建 列统计 marginRight: '12px'
this.needTotalList.map(item => { }
d.push(h('span', { }, ['已选择 ', h('a', {
style: { style: {
marginRight: '12px' fontWeight: 600
} }
}, }, this.selectedRows.length)])
[ )
`${ item.title }总计 `,
h('a', { // 构建 列统计
style: { this.needTotalList.map(item => {
fontWeight: 600 d.push(h('span', {
} style: {
}, `${ !item.customRender ? item.total : item.customRender(item.total) }`) marginRight: '12px'
])) }
}) },
[
// 构建 清空选择 `${ item.title }总计 `,
d.push(h('a', { h('a', {
style: { style: {
marginLeft: '24px' fontWeight: 600
}, }
on: { }, `${ !item.customRender ? item.total : item.customRender(item.total) }`)
click: _vm.onClearSelected ]))
} })
}, '清空'))
// 构建 清空选择
return d d.push(h('a', {
}, style: {
renderAlert(h) { marginLeft: '24px'
return h('span', { },
slot: 'message' on: {
}, this.renderMsg(h)) click: _vm.onClearSelected
}, }
}, }, '清空'))
render(h) { return d
const _vm = this },
renderAlert(h) {
const props = {}, return h('span', {
localKeys = Object.keys(this.$data) slot: 'message'
}, this.renderMsg(h))
Object.keys(T.props).forEach(k => { },
const localKey = `local${k.substring(0,1).toUpperCase()}${k.substring(1)}` },
if (localKeys.includes(localKey)) {
return props[k] = _vm[localKey] render(h) {
} const _vm = this
return props[k] = _vm[k]
}) const props = {},
localKeys = Object.keys(this.$data)
// 显示信息提示 Object.keys(T.props).forEach(k => {
if (this.showAlertInfo) { const localKey = `local${k.substring(0,1).toUpperCase()}${k.substring(1)}`
if (localKeys.includes(localKey)) {
props.rowSelection = { return props[k] = _vm[localKey]
selectedRowKeys: this.selectedRowKeys, }
onChange: (selectedRowKeys, selectedRows) => { return props[k] = _vm[k]
_vm.updateSelect(selectedRowKeys, selectedRows) })
_vm.$emit('onSelect', { selectedRowKeys: selectedRowKeys, selectedRows: selectedRows })
}
} // 显示信息提示
if (this.showAlertInfo) {
return h('div', {}, [
h('a-alert', { props.rowSelection = {
style: { selectedRowKeys: this.selectedRowKeys,
marginBottom: '16px' onChange: (selectedRowKeys, selectedRows) => {
}, _vm.updateSelect(selectedRowKeys, selectedRows)
props: { _vm.$emit('onSelect', { selectedRowKeys: selectedRowKeys, selectedRows: selectedRows })
type: 'info', }
showIcon: true }
}
}, [_vm.renderAlert(h)]), return h('div', {}, [
h('a-table', { h('a-alert', {
tag: 'component', style: {
attrs: props, marginBottom: '16px'
on: { },
change: _vm.loadData props: {
}, type: 'info',
scopedSlots: this.$scopedSlots showIcon: true
}, this.$slots.default) }
]) }, [_vm.renderAlert(h)]),
h('a-table', {
} tag: 'component',
attrs: props,
return h('a-table', { on: {
tag: 'component', change: _vm.loadData
attrs: props, },
on: { scopedSlots: this.$scopedSlots
change: _vm.loadData }, this.$slots.default)
}, ])
scopedSlots: this.$scopedSlots
}, this.$slots.default) }
} return h('a-table', {
tag: 'component',
attrs: props,
on: {
change: _vm.loadData
},
scopedSlots: this.$scopedSlots
}, this.$slots.default)
}
} }
\ No newline at end of file
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