gitee
/
snowy
mirror of https://gitee.com/xiaonuobase/snowy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

【更新】STable组件加入自适应窄屏以及column梳理大于10个后自动横向滚动条，其次修复默认选中功能

pull/175/head
小诺 2023-11-12 16:08:50 +08:00 committed by 俞宝山
parent 3414428c5e
commit be77e5c07a
2 changed files with 56 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
snowy-admin-web/src/components/Table/index.vue
View File

@ -17,8 +17,6 @@
data() { data() {
return { return {
needTotalList: [], needTotalList: [],
selectedRows: [],
selectedRowKeys: [],
localLoading: false, localLoading: false,
localDataSource: [], localDataSource: [],
localPagination: Object.assign({}, this.pagination), localPagination: Object.assign({}, this.pagination),
@ -65,11 +63,6 @@
type: Object, type: Object,
default: null default: null
}, },
/** @Deprecated */
showAlertInfo: {
type: Boolean,
default: false
},
showPagination: { showPagination: {
type: [String, Boolean], type: [String, Boolean],
default: 'auto' default: 'auto'
@ -82,19 +75,6 @@
type: Array, type: Array,
default: () => ['10', '20', '50', '100'] default: () => ['10', '20', '50', '100']
}, },
/**
* enable page URI mode
*
* e.g:
* /users/1
* /users/2
* /users/3?queryParam=test
* ...
*/
pageURI: {
type: Boolean,
default: false
},
extraTool: { extraTool: {
type: Array, type: Array,
default: () => [] default: () => []
@ -111,16 +91,6 @@
} }
}), }),
watch: { watch: {
'localPagination.current': function (val) {
this.pageURI &&
this.$router.push({
...this.$route,
name: this.$route.name,
params: Object.assign({}, this.$route.params, {
current: val
})
})
},
pageNum(val) { pageNum(val) {
Object.assign(this.localPagination, { Object.assign(this.localPagination, {
current: val current: val
@ -142,7 +112,7 @@
}, },
created() { created() {
const { current } = this.$route.params const { current } = this.$route.params
const localPageNum = (this.pageURI && current && parseInt(current)) || this.pageNum const localPageNum = (current && parseInt(current)) || this.pageNum
this.localPagination = this.localPagination =
(['auto', true].includes(this.showPagination) && (['auto', true].includes(this.showPagination) &&
Object.assign({}, this.localPagination, { Object.assign({}, this.localPagination, {
@ -158,7 +128,8 @@
false false
this.needTotalList = this.initTotalList(this.columns) this.needTotalList = this.initTotalList(this.columns)
this.loadData() this.loadData()
this.columnsSetting = this.columns/*.map((c) => { this.columnsSetting = this.columns
/*.map((c) => {
const tt = c.title const tt = c.title
if (typeof tt === 'string') { if (typeof tt === 'string') {
c.title = () => t(tt) c.title = () => t(tt)
@ -167,11 +138,7 @@
})*/ })*/
}, },
methods: { methods: {
/** // 表格重新加载方法 如果参数为 true, 则强制刷新到第一页
* 表格重新加载方法
* 如果参数为 true, 则强制刷新到第一页
* @param bool Boolean
*/
refresh(bool = false) { refresh(bool = false) {
bool && bool &&
(this.localPagination = Object.assign( (this.localPagination = Object.assign(
@ -183,12 +150,7 @@
)) ))
this.loadData() this.loadData()
}, },
/** // 加载数据方法 分页选项器 过滤条件 排序条件
* 加载数据方法
* @param {Object} pagination 分页选项器
* @param {Object} filters 过滤条件
* @param {Object} sorter 排序条件
*/
loadData(pagination, filters, sorter) { loadData(pagination, filters, sorter) {
this.localLoading = true this.localLoading = true
const parameter = Object.assign( const parameter = Object.assign(
@ -219,11 +181,7 @@
} }
) )
const result = this.data(parameter) const result = this.data(parameter)
// eslint-disable-next-line if ((typeof result === 'object' || typeof result === 'function') && typeof result.then === 'function') {
if (
(typeof result === 'object' || typeof result === 'function') &&
typeof result.then === 'function'
) {
result.then((r) => { result.then((r) => {
if (r == null) { if (r == null) {
this.localLoading = false this.localLoading = false
@ -292,14 +250,12 @@
}) })
return totalList return totalList
}, },
/** // 用于更新已选中的列表数据 total 统计
* 用于更新已选中的列表数据 total 统计
* @param selectedRowKeys
* @param selectedRows
*/
updateSelect(selectedRowKeys, selectedRows) { updateSelect(selectedRowKeys, selectedRows) {
this.selectedRows = selectedRows if (this.rowSelection) {
this.selectedRowKeys = selectedRowKeys this.rowSelection.selectedRows = selectedRows
this.rowSelection.selectedRowKeys = selectedRowKeys
}
const list = this.needTotalList const list = this.needTotalList
this.needTotalList = list.map((item) => { this.needTotalList = list.map((item) => {
return { return {
@ -311,44 +267,38 @@
} }
}) })
}, },
/** // 清空 table 已选中项
* 清空 table 已选中项
*/
clearSelected() { clearSelected() {
if (this.rowSelection) { if (this.rowSelection) {
this.rowSelection.onChange([], []) this.rowSelection.onChange([], [])
this.updateSelect([], []) this.updateSelect([], [])
} }
}, },
/** // 刷新并清空已选
* 刷新并清空已选
*/
clearRefreshSelected(bool = false) { clearRefreshSelected(bool = false) {
this.refresh(bool) this.refresh(bool)
this.clearSelected() this.clearSelected()
}, },
/** // 处理交给 table 使用者去处理 clear 事件时，内部选中统计同时调用
* 处理交给 table 使用者去处理 clear 事件时，内部选中统计同时调用
* @param callback
* @returns {*}
*/
renderClear(callback) { renderClear(callback) {
if (this.selectedRowKeys.length <= 0) return null if (this.rowSelection && this.rowSelection.selectedRowKeys && this.rowSelection.selectedRowKeys.length > 0) {
return ( return (
<a <a
className="ml-6" className="ml-6"
onClick={() => { onClick={() => {
callback() callback()
this.clearSelected() this.clearSelected()
}}> }}>
{' '} {' '}
清空{' '} 清空{' '}
</a> </a>
) )
} else {
return null
}
}, },
renderAlert() { renderAlert() {
// 绘制统计列数据 // 绘制统计列数据
// eslint-disable-next-line no-unused-vars
const needTotalItems = this.needTotalList.map((item) => { const needTotalItems = this.needTotalList.map((item) => {
return ( return (
<span className="mr-3"> <span className="mr-3">
@ -358,25 +308,38 @@
) )
}) })
// 绘制 清空 按钮 // 绘制 清空 按钮
// eslint-disable-next-line no-unused-vars
const clearItem = const clearItem =
typeof this.alert === 'boolean' && this.alert typeof this.alert === 'boolean' && this.alert
? this.renderClear(this.clearSelected) ? this.renderClear(this.clearSelected)
: typeof this.alert.clear === 'function' : typeof this.alert.clear === 'function'
? this.renderClear(this.alert.clear) ? this.renderClear(this.alert.clear)
: null : null
// 绘制 alert 组件 // 绘制 alert 组件
if (alert) { if (alert) {
const showAlert =
(typeof this.alert === 'object' &&
this.alert !== null &&
this.alert.show &&
typeof this.rowSelection.selectedRowKeys !== 'undefined') ||
this.alert
const message = ( const message = (
<div> <div>
<span className="mr-3"> <span className="mr-3">
已选择: <a className="font-6">{this.selectedRows.length}</a> 已选择:{' '}
<a className="font-6">
{this.rowSelection && this.rowSelection.selectedRowKeys
? this.rowSelection.selectedRowKeys.length
: 0}
</a>
</span> </span>
{needTotalItems} {needTotalItems}
{clearItem} {clearItem}
</div> </div>
) )
return <a-alert showIcon class="mb-4" message={message} /> if (showAlert) {
return <a-alert showIcon class="mb-4" message={message} />
}
} }
}, },
columnChange(val) { columnChange(val) {
@ -485,13 +448,6 @@
render() { render() {
let props = {} let props = {}
const localKeys = Object.keys(this.$data) const localKeys = Object.keys(this.$data)
const showAlert =
(typeof this.alert === 'object' &&
this.alert !== null &&
this.alert.show &&
typeof this.rowSelection.selectedRowKeys !== 'undefined') ||
this.alert
Object.keys(tableProps()).forEach((k) => { Object.keys(tableProps()).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)) { if (localKeys.includes(localKey)) {
@ -499,23 +455,10 @@
return props[k] return props[k]
} }
if (k === 'rowSelection') { if (k === 'rowSelection') {
if (showAlert && this.rowSelection) { if (this.rowSelection) {
// 如果需要使用alert，则重新绑定 rowSelection 事件 // 如果需要使用alert，则重新绑定 rowSelection 事件
props[k] = { props[k] = {
...this.rowSelection, ...this.rowSelection,
selectedRows: this.selectedRows,
selectedRowKeys: this.selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
this.updateSelect(selectedRowKeys, selectedRows)
typeof this[k].onChange !== 'undefined' && this[k].onChange(selectedRowKeys, selectedRows)
}
}
return props[k]
} else if (!showAlert && this.rowSelection) {
props[k] = {
...this.rowSelection,
selectedRows: this.selectedRows,
selectedRowKeys: this.selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => { onChange: (selectedRowKeys, selectedRows) => {
this.updateSelect(selectedRowKeys, selectedRows) this.updateSelect(selectedRowKeys, selectedRows)
typeof this[k].onChange !== 'undefined' && this[k].onChange(selectedRowKeys, selectedRows) typeof this[k].onChange !== 'undefined' && this[k].onChange(selectedRowKeys, selectedRows)
@ -535,6 +478,14 @@
size: this.customSize, // 注意这个size是a-table组件需要的，这里不能跟别的地方成为compSize size: this.customSize, // 注意这个size是a-table组件需要的，这里不能跟别的地方成为compSize
columns: this.columnsSetting.filter((value) => value.checked === undefined || value.checked) columns: this.columnsSetting.filter((value) => value.checked === undefined || value.checked)
} }
// 如果在使用界面每配置scroll，那么使用全局的，对缩小屏幕下横向滚动条左右滑动
if (!props.scroll) {
props.scroll = { x: 1000 }
// 对于界面上要显示的字段太多，默认加上横向滚动条
if (props.columns && props.columns.length > 10) {
props.scroll = { x: 1200 }
}
}
return props[k] return props[k]
}) })
const table = ( const table = (
@ -552,7 +503,7 @@
return ( return (
<div className="table-wrapper"> <div className="table-wrapper">
{this.renderHeader()} {this.renderHeader()}
{showAlert ? this.renderAlert() : null} {this.renderAlert()}
{table} {table}
</div> </div>
) )

2
snowy-admin-web/src/style/index.less
View File

@ -409,7 +409,7 @@ a, button, input, textarea {
} }
/* 重写antdv的表格滚动条 */ /* 重写antdv的表格滚动条 */
.ant-table-body { .ant-table-body, .ant-table-content{
&::-webkit-scrollbar { &::-webkit-scrollbar {
height: 10px; height: 10px;
width: 10px; width: 10px;