lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity

优化分页，支持更多按键操作

Browse Source
This commit is contained in:
xuliangzhan
2020-12-07 13:55:15 +08:00
parent 63bbf8d361
commit 4358aa76ea
10 changed files with 66 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/plugins/xtable/index.js
View File

@@ -39,6 +39,7 @@ import VXETablePluginMenus from 'vxe-table-plugin-menus'
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
import VXETablePluginExportPDF from 'vxe-table-plugin-export-pdf'
import VXETablePluginRenderer from 'vxe-table-plugin-renderer'
// import VXETablePluginShortcutKey from 'vxe-table-plugin-shortcut-key'
import 'vxe-table-plugin-element/dist/style.css'
import 'vxe-table-plugin-iview/dist/style.css'
import 'vxe-table-plugin-antd/dist/style.css'
@@ -103,3 +104,4 @@ VXETable.use(VXETablePluginMenus)
VXETable.use(VXETablePluginExportXLSX)
VXETable.use(VXETablePluginExportPDF)
VXETable.use(VXETablePluginRenderer)
// VXETable.use(VXETablePluginShortcutKey)

2
examples/views/button/Button.vue
View File

@@ -214,7 +214,7 @@
<pre>
<pre-code>
| Tab | 切换到上一个 |
| Shift Tab | 切换到下一个 |
| Shift + Tab | 切换到下一个 |
| Spacebar | 按下点击 |
| Enter | 点击 |
</pre-code>

2
examples/views/checkbox/Checkbox.vue
View File

@@ -33,7 +33,7 @@
<pre>
<pre-code>
| Tab | 切换到上一个 |
| Shift Tab | 切换到下一个 |
| Shift + Tab | 切换到下一个 |
| Spacebar | 按下勾选 |
</pre-code>
</pre>

4
examples/views/pager/Pager.vue
View File

@@ -90,6 +90,10 @@
<pre-code>
| Arrow Up ↑ | 如果在当前页输入框内则向上翻页 |
| Arrow Down ↓ | 如果在当前页输入框内则向下翻页 |
| Tab | 切换到上一个 |
| Shift + Tab | 切换到下一个 |
| Spacebar | 按下点击 |
| Enter | 点击 |
</pre-code>
</pre>

2
examples/views/radio/Radio.vue
View File

@@ -52,7 +52,7 @@
<pre>
<pre-code>
| Tab | 切换到上一个 |
| Shift Tab | 切换到下一个 |
| Shift + Tab | 切换到下一个 |
| Arrow Up ↑ | 如果在分组内则移动到上一个选项 |
| Arrow Left ← | 如果在分组内则移动到上一个选项 |
| Arrow Down ↓ | 如果在分组内则移动到下一个选项 |

4
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "vxe-table",
"version": "3.0.8",
"version": "3.0.9",
"description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
"scripts": {
"serve": "vue-cli-service serve",
@@ -84,7 +84,7 @@
"vxe-table-plugin-iview": "^1.10.0",
"vxe-table-plugin-menus": "^1.5.2",
"vxe-table-plugin-renderer": "^1.3.0",
"vxe-table-plugin-shortcut-key": "^1.4.0",
"vxe-table-plugin-shortcut-key": "^1.4.2",
"vxe-table-plugin-virtual-tree": "0.5.6",
"xe-ajax": "^4.0.5",
"xe-ajax-mock": "^1.12.0",

22
packages/pager/src/pager.js
View File

@@ -113,7 +113,7 @@ export default {
methods: {
// 上一页
renderPrevPage (h) {
return h('span', {
return h('button', {
class: ['vxe-pager--prev-btn', {
'is--disabled': this.currentPage <= 1
}],
@@ -131,7 +131,7 @@ export default {
},
// 向上翻页
renderPrevJump (h, tagName) {
return h(tagName || 'span', {
return h(tagName || 'button', {
class: ['vxe-pager--jump-prev', {
'is--fixed': !tagName,
'is--disabled': this.currentPage <= 1
@@ -153,19 +153,19 @@ export default {
},
// number
renderNumber (h) {
return h('ul', {
return h('span', {
class: 'vxe-pager--btn-wrapper'
}, this.renderPageBtn(h))
},
// jumpNumber
renderJumpNumber (h) {
return h('ul', {
return h('span', {
class: 'vxe-pager--btn-wrapper'
}, this.renderPageBtn(h, true))
},
// 向下翻页
renderNextJump (h, tagName) {
return h(tagName || 'span', {
return h(tagName || 'button', {
class: ['vxe-pager--jump-next', {
'is--fixed': !tagName,
'is--disabled': this.currentPage >= this.pageCount
@@ -187,7 +187,7 @@ export default {
},
// 下一页
renderNextPage (h) {
return h('span', {
return h('button', {
class: ['vxe-pager--next-btn', {
'is--disabled': this.currentPage >= this.pageCount
}],
@@ -285,20 +285,20 @@ export default {
}
if (showJump && isLt) {
nums.push(
h('li', {
h('button', {
class: 'vxe-pager--num-btn',
on: {
click: () => this.jumpPage(1)
}
}, 1),
this.renderPrevJump(h, 'li')
this.renderPrevJump(h, 'span')
)
}
numList.forEach((item, index) => {
const number = startNumber + index
if (number <= pageCount) {
nums.push(
h('li', {
h('button', {
class: ['vxe-pager--num-btn', {
'is--active': currentPage === number
}],
@@ -312,8 +312,8 @@ export default {
})
if (showJump && isGt) {
nums.push(
this.renderNextJump(h, 'li'),
h('li', {
this.renderNextJump(h, 'button'),
h('button', {
class: 'vxe-pager--num-btn',
on: {
click: () => this.jumpPage(pageCount)

42
packages/table/src/methods.js
View File

@@ -1877,7 +1877,7 @@ const Methods = {
// 该行为只对当前激活的表格有效
if (this.isActivated) {
this.preventEvent(evnt, 'event.keydown', null, () => {
const { isCtxMenu, ctxMenuStore, editStore, editOpts, editConfig, mouseConfig = {}, keyboardConfig = {}, treeConfig, treeOpts, highlightCurrentRow, currentRow, bodyCtxMenu } = this
const { isCtxMenu, ctxMenuStore, editStore, editOpts, editConfig, mouseConfig, mouseOpts, keyboardConfig, keyboardOpts, treeConfig, treeOpts, highlightCurrentRow, currentRow, bodyCtxMenu } = this
const { selected, actived } = editStore
const { keyCode } = evnt
const isBack = keyCode === 8
@@ -1908,9 +1908,9 @@ const Methods = {
} else {
this.moveCtxMenu(evnt, keyCode, ctxMenuStore, 'selected', 39, true, this.ctxMenuList)
}
} else if (keyboardConfig && this.mouseConfig && this.mouseOpts.area && this.handleKeyboardEvent) {
} else if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardEvent) {
this.handleKeyboardEvent(evnt)
} else if (isSpacebar && (keyboardConfig.isArrow || keyboardConfig.isTab) && selected.row && selected.column && (selected.column.type === 'checkbox' || selected.column.type === 'radio')) {
} else if (keyboardConfig && isSpacebar && (keyboardOpts.isArrow || keyboardOpts.isTab) && selected.row && selected.column && (selected.column.type === 'checkbox' || selected.column.type === 'radio')) {
// 空格键支持选中复选框
evnt.preventDefault()
if (selected.column.type === 'checkbox') {
@@ -1927,7 +1927,7 @@ const Methods = {
params = actived.args
this.clearActived(evnt)
// 如果配置了选中功能，则为选中状态
if (mouseConfig.selected) {
if (mouseConfig && mouseOpts.selected) {
this.$nextTick(() => this.handleSelected(params, evnt))
}
}
@@ -1946,7 +1946,7 @@ const Methods = {
this.keyCtxTimeout = setTimeout(() => {
this._keyCtx = false
}, 1000)
} else if (isEnter && !hasAltKey && keyboardConfig.isEnter && (selected.row || actived.row || (treeConfig && highlightCurrentRow && currentRow))) {
} else if (isEnter && !hasAltKey && keyboardConfig && keyboardOpts.isEnter && (selected.row || actived.row || (treeConfig && highlightCurrentRow && currentRow))) {
// 退出选中
if (hasCtrlKey) {
// 如果是激活编辑状态，则取消编辑
@@ -1954,7 +1954,7 @@ const Methods = {
params = actived.args
this.clearActived(evnt)
// 如果配置了选中功能，则为选中状态
if (mouseConfig.selected) {
if (mouseConfig && mouseOpts.selected) {
this.$nextTick(() => this.handleSelected(params, evnt))
}
}
@@ -1963,13 +1963,13 @@ const Methods = {
if (selected.row || actived.row) {
const targetArgs = selected.row ? selected.args : actived.args
if (hasShiftKey) {
if (keyboardConfig.enterToTab) {
if (keyboardOpts.enterToTab) {
this.moveTabSelected(targetArgs, hasShiftKey, evnt)
} else {
this.moveSelected(targetArgs, isLeftArrow, true, isRightArrow, false, evnt)
}
} else {
if (keyboardConfig.enterToTab) {
if (keyboardOpts.enterToTab) {
this.moveTabSelected(targetArgs, hasShiftKey, evnt)
} else {
this.moveSelected(targetArgs, isLeftArrow, false, isRightArrow, true, evnt)
@@ -1988,7 +1988,7 @@ const Methods = {
}
}
}
} else if (operArrow && keyboardConfig.isArrow) {
} else if (operArrow && keyboardConfig && keyboardOpts.isArrow) {
if (!isEditStatus) {
// 如果按下了方向键
if (selected.row && selected.column) {
@@ -1998,22 +1998,22 @@ const Methods = {
this.moveCurrentRow(isUpArrow, isDwArrow, evnt)
}
}
} else if (isTab && keyboardConfig.isTab) {
} else if (isTab && keyboardConfig && keyboardOpts.isTab) {
// 如果按下了 Tab 键切换
if (selected.row || selected.column) {
this.moveTabSelected(selected.args, hasShiftKey, evnt)
} else if (actived.row || actived.column) {
this.moveTabSelected(actived.args, hasShiftKey, evnt)
}
} else if (isDel || (treeConfig && highlightCurrentRow && currentRow ? isBack && keyboardConfig.isArrow : isBack)) {
} else if (keyboardConfig && (isDel || (treeConfig && highlightCurrentRow && currentRow ? isBack && keyboardOpts.isArrow : isBack))) {
if (!isEditStatus) {
// 如果是删除键
if (keyboardConfig.isDel && (selected.row || selected.column)) {
if (keyboardOpts.isDel && (selected.row || selected.column)) {
setCellValue(selected.row, selected.column, null)
if (isBack) {
this.handleActived(selected.args, evnt)
}
} else if (isBack && keyboardConfig.isArrow && treeConfig && highlightCurrentRow && currentRow) {
} else if (isBack && keyboardOpts.isArrow && treeConfig && highlightCurrentRow && currentRow) {
// 如果树形表格回退键关闭当前行返回父节点
const { parent: parentRow } = XEUtils.findTree(this.afterFullData, item => item === currentRow, treeOpts)
if (parentRow) {
@@ -2025,14 +2025,14 @@ const Methods = {
}
}
}
} else if (keyboardConfig.isEdit && !hasCtrlKey && !hasMetaKey && (isSpacebar || (keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 96 && keyCode <= 111) || (keyCode >= 186 && keyCode <= 192) || (keyCode >= 219 && keyCode <= 222))) {
} else if (keyboardConfig && keyboardOpts.isEdit && !hasCtrlKey && !hasMetaKey && (isSpacebar || (keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 96 && keyCode <= 111) || (keyCode >= 186 && keyCode <= 192) || (keyCode >= 219 && keyCode <= 222))) {
// 启用编辑后，空格键功能将失效
// if (isSpacebar) {
// evnt.preventDefault()
// }
// 如果是按下非功能键之外允许直接编辑
if (selected.column && selected.row && selected.column.editRender) {
if (!keyboardConfig.editMethod || !(keyboardConfig.editMethod(selected.args) === false)) {
if (!keyboardOpts.editMethod || !(keyboardOpts.editMethod(selected.args) === false)) {
if (!editOpts.activeMethod || editOpts.activeMethod(selected.args)) {
setCellValue(selected.row, selected.column, null)
this.handleActived(selected.args, evnt)
@@ -2045,11 +2045,11 @@ const Methods = {
}
},
handleGlobalPasteEvent (evnt) {
const { isActivated, keyboardConfig, mouseConfig, mouseOpts, editStore } = this
const { isActivated, keyboardConfig, keyboardOpts, mouseConfig, mouseOpts, editStore } = this
const { actived } = editStore
if (isActivated) {
if (!(actived.row || actived.column)) {
if (keyboardConfig && keyboardConfig.isClip && mouseConfig && mouseOpts.area && this.handlePasteCellAreaEvent) {
if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && this.handlePasteCellAreaEvent) {
this.handlePasteCellAreaEvent(evnt)
}
}
@@ -2057,11 +2057,11 @@ const Methods = {
}
},
handleGlobalCopyEvent (evnt) {
const { isActivated, keyboardConfig, mouseConfig, mouseOpts, editStore } = this
const { isActivated, keyboardConfig, keyboardOpts, mouseConfig, mouseOpts, editStore } = this
const { actived } = editStore
if (isActivated) {
if (!(actived.row || actived.column)) {
if (keyboardConfig && keyboardConfig.isClip && mouseConfig && mouseOpts.area && this.handleCopyCellAreaEvent) {
if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && this.handleCopyCellAreaEvent) {
this.handleCopyCellAreaEvent(evnt)
}
}
@@ -2069,11 +2069,11 @@ const Methods = {
}
},
handleGlobalCutEvent (evnt) {
const { isActivated, keyboardConfig, mouseConfig, mouseOpts, editStore } = this
const { isActivated, keyboardConfig, keyboardOpts, mouseConfig, mouseOpts, editStore } = this
const { actived } = editStore
if (isActivated) {
if (!(actived.row || actived.column)) {
if (keyboardConfig && keyboardConfig.isClip && mouseConfig && mouseOpts.area && this.handleCutCellAreaEvent) {
if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && this.handleCutCellAreaEvent) {
this.handleCutCellAreaEvent(evnt)
}
}

29
styles/pager.scss
View File

@@ -37,7 +37,20 @@
.vxe-pager--num-btn,
.vxe-pager--jump-prev,
.vxe-pager--jump-next {
color: inherit;
outline: 0;
border: 1px solid transparent;
&:not(.is--disabled) {
&:focus {
box-shadow: 0 0 0.25em 0 $vxe-primary-color;
}
&:hover {
color: lighten($vxe-primary-color, 6%);
}
&:active {
background-color: darken($vxe-button-default-background-color, 3%);
}
}
}
&.is--border,
&.is--perfect {
@@ -54,24 +67,27 @@
&.is--background,
&.is--perfect {
.vxe-pager--prev-btn,
.vxe-pager--next-btn {
background-color: #f4f4f5;
.vxe-pager--next-btn,
.vxe-pager--jump-prev,
.vxe-pager--num-btn,
.vxe-pager--jump-next {
background-color: $vxe-pager-perfect-button-background-color;
}
.vxe-pager--jump-prev,
.vxe-pager--num-btn,
.vxe-pager--jump-next {
background-color: #f4f4f5;
&:not(.is--disabled) {
&:hover {
color: $vxe-primary-color;
}
&.is--active {
color: #fff;
background-color: $vxe-primary-color;
&:hover {
background-color: lighten($vxe-primary-color, 6%);
}
&:focus {
border-color: $vxe-primary-color;
}
&:active {
border-color: darken($vxe-primary-color, 3%);
background-color: darken($vxe-primary-color, 3%);
}
}
@@ -157,7 +173,6 @@
min-width: 2.15em;
}
.vxe-pager--btn-wrapper {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;

1
styles/variable.scss
View File

@@ -124,6 +124,7 @@ $vxe-tooltip-validate-error-background-color: #f56c6c;
/*pager*/
$vxe-pager-background-color: #fff;
$vxe-pager-perfect-button-background-color: #f4f4f5;
/*modal*/
$vxe-modal-header-background-color: #F8F8F8;