You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.7 KiB
69 lines
1.7 KiB
1 year ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="flex">
|
||
|
|
<el-table :data="tableObject.tableList" border style="flex: 1">
|
||
|
|
<slot></slot>
|
||
|
|
</el-table>
|
||
|
|
<el-button
|
||
|
|
ref="ColumnSetting"
|
||
|
|
plain
|
||
|
|
style="writing-mode: vertical-lr; height: 100px; letter-spacing: 2px"
|
||
|
|
@click="clickSetting"
|
||
|
|
>表格列控制</el-button
|
||
|
|
>
|
||
|
|
<el-popover
|
||
|
|
ref="TableColumnPop"
|
||
|
|
:virtual-ref="ColumnSetting"
|
||
|
|
placement="left"
|
||
|
|
width="120px"
|
||
|
|
trigger="click"
|
||
|
|
virtual-triggering
|
||
|
|
>
|
||
|
|
<el-checkbox-group v-model="checkedColumns">
|
||
|
|
<el-checkbox v-for="item in tableColumns" :key="item.field" :label="item.field">
|
||
|
|
{{ item.label }}
|
||
|
|
</el-checkbox>
|
||
|
|
</el-checkbox-group>
|
||
|
|
</el-popover>
|
||
|
|
</div>
|
||
|
|
<!-- 分页 -->
|
||
|
|
<Pagination
|
||
|
|
v-model:limit="pageSize"
|
||
|
|
v-model:page="currentPage"
|
||
|
|
:total="tableObject.total"
|
||
|
|
@pagination="getList"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
const props = defineProps({
|
||
|
|
tableObject: { type: Object, default: () => ({ tableList: [] }) },
|
||
|
|
tableColumns: { type: Array, default: () => [] }
|
||
|
|
})
|
||
|
|
|
||
|
|
const emit = defineEmits(['update:tableObject', 'getList'])
|
||
|
|
|
||
|
|
const currentPage = ref(props.tableObject?.currentPage || 1)
|
||
|
|
|
||
|
|
const pageSize = ref(props.tableObject?.pageSize || 20)
|
||
|
|
|
||
|
|
const ColumnSetting = ref()
|
||
|
|
const TableColumnPop = ref()
|
||
|
|
|
||
|
|
const checkedColumns = ref([])
|
||
|
|
|
||
|
|
function getList({ page, limit }) {
|
||
|
|
emit('update:tableObject', { ...props.tableObject, currentPage: page, pageSize: limit })
|
||
|
|
nextTick(() => {
|
||
|
|
emit('getList')
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const clickSetting = () => {
|
||
|
|
unref(TableColumnPop).TableColumnPop?.delayHide?.()
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped></style>
|