修复表格分页pageSize无效的bug
This commit is contained in:
BaobeierB
parent
fda5a40864
commit
3baf83c09b
|
|
@ -1,9 +1,7 @@
|
|||
<template>
|
||||
<div class="zb-pro-table">
|
||||
<div class="header">
|
||||
<el-form :inline="true"
|
||||
class="search-form"
|
||||
:model="formInline" ref="ruleFormRef" >
|
||||
<el-form :inline="true" class="search-form" :model="formInline" ref="ruleFormRef">
|
||||
<template v-for="(item, index) in formSearchData" :key="index">
|
||||
<el-form-item :label="item.label" v-show="isExpand ? isExpand : index < 2">
|
||||
<template v-if="item.valueType === 'input'">
|
||||
|
|
@ -12,7 +10,9 @@
|
|||
<template v-if="item.valueType === 'select'">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="formInline[item.name]" :placeholder="`请选择${item.label}`">
|
||||
v-model="formInline[item.name]"
|
||||
:placeholder="`请选择${item.label}`"
|
||||
>
|
||||
<el-option
|
||||
v-for="ite in item.options"
|
||||
:key="ite.value"
|
||||
|
|
@ -27,7 +27,9 @@
|
|||
<div class="search">
|
||||
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
|
||||
<el-button @click="reset(ruleFormRef)">重置</el-button>
|
||||
<el-button link type="primary" @click="isExpand = !isExpand">{{ isExpand ? '合并' : '展开'}}<el-icon>
|
||||
<el-button link type="primary" @click="isExpand = !isExpand"
|
||||
>{{ isExpand ? '合并' : '展开'
|
||||
}}<el-icon>
|
||||
<arrow-down v-if="!isExpand" />
|
||||
<arrow-up v-else /> </el-icon
|
||||
></el-button>
|
||||
|
|
@ -53,7 +55,7 @@
|
|||
v-if="item.type"
|
||||
:type="item.type"
|
||||
:width="item.width"
|
||||
:align="item.align!=null?item.align:'center'"
|
||||
:align="item.align != null ? item.align : 'center'"
|
||||
:fixed="item.fixed"
|
||||
:label="item.label"
|
||||
/>
|
||||
|
|
@ -61,7 +63,7 @@
|
|||
v-else
|
||||
:prop="item.name"
|
||||
:width="item.width"
|
||||
:align="item.align!=null?item.align:'center'"
|
||||
:align="item.align != null ? item.align : 'center'"
|
||||
:fixed="item.fixed"
|
||||
:label="item.label"
|
||||
>
|
||||
|
|
@ -77,7 +79,7 @@
|
|||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:currentPage="currentPage1"
|
||||
:page-size="10"
|
||||
:page-sizes="[10, 20, 30, 40, 50, 100]"
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="data.length"
|
||||
|
|
@ -89,78 +91,81 @@
|
|||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import {Search } from '@element-plus/icons-vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
|
||||
let props = defineProps({
|
||||
import { computed, ref } from 'vue'
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
|
||||
let props = defineProps({
|
||||
columns: {
|
||||
type: Array,
|
||||
type: Array<any>,
|
||||
default: () => [],
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
type: Array<any>,
|
||||
default: () => [],
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
const currentPage1 = ref(1)
|
||||
// 收缩展开
|
||||
const isExpand = ref(false)
|
||||
const handleSizeChange = (val: number) => {
|
||||
const currentPage1 = ref(1)
|
||||
// 收缩展开
|
||||
const isExpand = ref(false)
|
||||
// 每页显示几个数据
|
||||
const pageSize = ref(10)
|
||||
const handleSizeChange = (val: number) => {
|
||||
console.log(`${val} items per page`)
|
||||
}
|
||||
const handleCurrentChange = (val: number) => {
|
||||
pageSize.value = val
|
||||
}
|
||||
const handleCurrentChange = (val: number) => {
|
||||
console.log(`current page: ${val}`)
|
||||
currentPage1.value = val
|
||||
}
|
||||
}
|
||||
|
||||
const list = computed(() => {
|
||||
const list = computed(() => {
|
||||
let arr = JSON.parse(JSON.stringify(props.data))
|
||||
return arr.splice((currentPage1.value - 1) * 10, 10)
|
||||
})
|
||||
return arr.splice((currentPage1.value - 1) * pageSize.value, pageSize.value)
|
||||
})
|
||||
|
||||
const listLoading = ref(false)
|
||||
const confirmEdit = (row) => {
|
||||
const listLoading = ref(false)
|
||||
const confirmEdit = (row) => {
|
||||
row.edit = false
|
||||
}
|
||||
const cancelEdit = (row) => {
|
||||
}
|
||||
const cancelEdit = (row) => {
|
||||
row.edit = false
|
||||
}
|
||||
}
|
||||
|
||||
import { reactive } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
|
||||
let obj = {}
|
||||
let search = []
|
||||
for (let item of props.columns) {
|
||||
let obj = {}
|
||||
let search = []
|
||||
for (let item of props.columns) {
|
||||
if (item.inSearch) {
|
||||
obj[item.name] = null
|
||||
}
|
||||
if (item.inSearch) {
|
||||
search.push(item)
|
||||
}
|
||||
}
|
||||
const formSearchData = ref(search)
|
||||
const formInline = reactive(obj)
|
||||
}
|
||||
const formSearchData = ref(search)
|
||||
const formInline = reactive(obj)
|
||||
|
||||
const onSubmit = () => {
|
||||
const onSubmit = () => {
|
||||
console.log('submit!', formInline)
|
||||
emit('onSubmit', formInline)
|
||||
}
|
||||
}
|
||||
|
||||
const reset = (formEl: FormInstance | undefined) => {
|
||||
const reset = (formEl: FormInstance | undefined) => {
|
||||
formSearchData.value.forEach((item) => {
|
||||
formInline[item.name] = null
|
||||
})
|
||||
emit('reset')
|
||||
}
|
||||
const deleteAction = (row) => {
|
||||
}
|
||||
const deleteAction = (row) => {
|
||||
ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
|
|
@ -172,44 +177,44 @@ const deleteAction = (row) => {
|
|||
ElMessage.success('删除成功')
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.edit-input {
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
.zb-pro-table {
|
||||
}
|
||||
.zb-pro-table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.header{
|
||||
.header {
|
||||
display: flex;
|
||||
padding: 16px 16px 0 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
.search-form{
|
||||
.search-form {
|
||||
flex: 1;
|
||||
::v-deep{
|
||||
.el-input--default{
|
||||
::v-deep {
|
||||
.el-input--default {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search{
|
||||
.search {
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
.footer {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
|
|
@ -219,31 +224,31 @@ const deleteAction = (row) => {
|
|||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
min-height: 300px;
|
||||
.operator{
|
||||
margin-bottom: 15px
|
||||
.operator {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.table{
|
||||
.table {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
.zb-table{
|
||||
.zb-table {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
::v-deep{
|
||||
.el-table__header th{
|
||||
::v-deep {
|
||||
.el-table__header th {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #252525;
|
||||
}
|
||||
}
|
||||
.pagination{
|
||||
.pagination {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue