Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
data-table
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Graphs
Network
Create a new issue
Commits
Issue Boards
Authored by
hookehuyr
2025-11-20 17:47:54 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
5fc7e825bf7b28d262b8e69f2553121edcadf4aa
5fc7e825
1 parent
2ef1acc2
feat(分页组件): 增强提交按钮和上一页按钮的配置能力
支持通过 submitButton 对象配置提交按钮文本和上一页按钮的行为
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
33 additions
and
6 deletions
src/components/PaginationField/index.vue
src/views/index.vue
src/components/PaginationField/index.vue
View file @
5fc7e82
<!--
* @Date: 2025-11-18 16:17:40
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-20 1
5:44:14
* @LastEditTime: 2025-11-20 1
7:46:05
* @FilePath: /data-table/src/components/PaginationField/index.vue
* @Description: 分页组件
-->
...
...
@@ -9,9 +9,16 @@
<div class="pagination-field">
<div class="indicator">第{{ current + 1 }}页 / 共{{ total }}页</div>
<div class="actions">
<van-button v-if="showPrev" :disabled="prevDisabled || current === 0" round type="primary" class="btn" @click="onPrev">{{ prevLabel }}</van-button>
<van-button
v-if="showPrev"
:disabled="prev_disabled_effective || current === 0"
round
type="primary"
class="btn"
@click="onPrev"
>{{ prev_label_effective }}</van-button>
<van-button v-if="showNext" round type="primary" class="btn" @click="onNext">{{ nextLabel }}</van-button>
<van-button v-if="showSubmit" round type="primary" class="btn" @click="onSubmit">{{ submit
Label
}}</van-button>
<van-button v-if="showSubmit" round type="primary" class="btn" @click="onSubmit">{{ submit
Button.text
}}</van-button>
</div>
</div>
<div class="placeholder" />
...
...
@@ -26,7 +33,7 @@ const props = defineProps({
isLast: { type: Boolean, default: false },
prevLabel: { type: String, default: '上一页' },
nextLabel: { type: String, default: '下一页' },
submit
Label: { type: String, default: '提交'
},
submit
Button: { type: Object, default: { text: '提交', back_title: '上一页', is_back: true }
},
prevDisabled: { type: Boolean, default: false },
})
...
...
@@ -36,6 +43,24 @@ const showPrev = computed(() => props.current > 0)
const showNext = computed(() => props.current < props.total - 1)
const showSubmit = computed(() => props.current === props.total - 1)
/**
* @description 计算上一页按钮文案(最后一页用提交按钮配置的返回文案)
* @returns {import('vue').ComputedRef<string>}
*/
const prev_label_effective = computed(() => {
// 最后一页使用 submitButton.back_title,否则使用外部传入的 prevLabel
return showSubmit.value ? (props.submitButton?.back_title || props.prevLabel) : props.prevLabel
})
/**
* @description 计算上一页按钮禁用状态(最后一页用提交按钮配置的 is_back)
* @returns {import('vue').ComputedRef<boolean>}
*/
const prev_disabled_effective = computed(() => {
// 最后一页直接使用 submitButton.is_back 替换 prevDisabled;否则使用外部传入的 prevDisabled
return showSubmit.value ? (!props.submitButton?.is_back ?? props.prevDisabled) : props.prevDisabled
})
const onPrev = () => emit('prev')
const onNext = () => emit('next')
const onSubmit = () => emit('submit')
...
...
src/views/index.vue
View file @
5fc7e82
<!--
* @Date: 2022-07-18 10:22:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-20 1
5:44:03
* @LastEditTime: 2025-11-20 1
7:47:01
* @FilePath: /data-table/src/views/index.vue
* @Description: 首页
-->
...
...
@@ -35,7 +35,7 @@
:is-last="current_page_index === filtered_pages.length - 1"
:prev-label="page_nav.prev_text"
:next-label="page_nav.next_text"
:submit-
label="PCommit.text ? PCommit.text : '提交'
"
:submit-
button="PCommit
"
:prev-disabled="page_nav.prev_disabled"
@prev="handlePrev"
@next="handleNext"
...
...
@@ -471,6 +471,8 @@ onMounted(async () => {
PCommit.value = {
text: page_commit.text,
visible: !page_commit.invisible,
is_back: page_commit.is_back,
back_title: page_commit.back_title,
};
}
...
...
Please
register
or
login
to post a comment