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