@@ -358,25 +308,38 @@
)
})
// 绘制 清空 按钮
- // eslint-disable-next-line no-unused-vars
const clearItem =
typeof this.alert === 'boolean' && this.alert
? this.renderClear(this.clearSelected)
: typeof this.alert.clear === 'function'
? this.renderClear(this.alert.clear)
: null
+
// 绘制 alert 组件
if (alert) {
+ const showAlert =
+ (typeof this.alert === 'object' &&
+ this.alert !== null &&
+ this.alert.show &&
+ typeof this.rowSelection.selectedRowKeys !== 'undefined') ||
+ this.alert
const message = (
)
- return
+ if (showAlert) {
+ return
+ }
}
},
columnChange(val) {
@@ -485,13 +448,6 @@
render() {
let props = {}
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) => {
const localKey = `local${k.substring(0, 1).toUpperCase()}${k.substring(1)}`
if (localKeys.includes(localKey)) {
@@ -499,23 +455,10 @@
return props[k]
}
if (k === 'rowSelection') {
- if (showAlert && this.rowSelection) {
+ if (this.rowSelection) {
// 如果需要使用alert,则重新绑定 rowSelection 事件
props[k] = {
...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) => {
this.updateSelect(selectedRowKeys, selectedRows)
typeof this[k].onChange !== 'undefined' && this[k].onChange(selectedRowKeys, selectedRows)
@@ -535,6 +478,14 @@
size: this.customSize, // 注意这个size是a-table组件需要的,这里不能跟别的地方成为compSize
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]
})
const table = (
@@ -552,7 +503,7 @@
return (
{this.renderHeader()}
- {showAlert ? this.renderAlert() : null}
+ {this.renderAlert()}
{table}
)
diff --git a/snowy-admin-web/src/style/index.less b/snowy-admin-web/src/style/index.less
index a936141f..d71574cd 100644
--- a/snowy-admin-web/src/style/index.less
+++ b/snowy-admin-web/src/style/index.less
@@ -409,7 +409,7 @@ a, button, input, textarea {
}
/* 重写antdv的表格滚动条 */
-.ant-table-body {
+.ant-table-body, .ant-table-content{
&::-webkit-scrollbar {
height: 10px;
width: 10px;