81 lines
2.6 KiB
Vue
81 lines
2.6 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { useColumns } from "./columns";
|
|||
|
|
|
|||
|
|
const {
|
|||
|
|
loading,
|
|||
|
|
columns,
|
|||
|
|
dataList,
|
|||
|
|
select,
|
|||
|
|
hideVal,
|
|||
|
|
tableSize,
|
|||
|
|
pagination,
|
|||
|
|
loadingConfig,
|
|||
|
|
paginationAlign,
|
|||
|
|
paginationSmall,
|
|||
|
|
onChange,
|
|||
|
|
onSizeChange,
|
|||
|
|
onCurrentChange
|
|||
|
|
} = useColumns();
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<el-space class="float-right mb-4">
|
|||
|
|
<p class="text-sm">多选：</p>
|
|||
|
|
<el-radio-group v-model="select" size="small">
|
|||
|
|
<el-radio-button value="yes">是</el-radio-button>
|
|||
|
|
<el-radio-button value="no">否</el-radio-button>
|
|||
|
|
</el-radio-group>
|
|||
|
|
<el-divider direction="vertical" />
|
|||
|
|
<p class="text-sm">动态列：</p>
|
|||
|
|
<el-radio-group v-model="hideVal" size="small">
|
|||
|
|
<el-radio-button value="nohide">不隐藏</el-radio-button>
|
|||
|
|
<el-radio-button value="hideDate">隐藏日期</el-radio-button>
|
|||
|
|
<el-radio-button value="hideName">隐藏姓名</el-radio-button>
|
|||
|
|
<el-radio-button value="hideAddress">隐藏地址</el-radio-button>
|
|||
|
|
</el-radio-group>
|
|||
|
|
<el-divider direction="vertical" />
|
|||
|
|
<p class="text-sm">表格大小：</p>
|
|||
|
|
<el-radio-group v-model="tableSize" size="small">
|
|||
|
|
<el-radio-button value="large">large</el-radio-button>
|
|||
|
|
<el-radio-button value="default">default</el-radio-button>
|
|||
|
|
<el-radio-button value="small">small</el-radio-button>
|
|||
|
|
</el-radio-group>
|
|||
|
|
<el-divider direction="vertical" />
|
|||
|
|
<p class="text-sm">分页大小：</p>
|
|||
|
|
<el-radio-group v-model="paginationSmall" size="small" @change="onChange">
|
|||
|
|
<el-radio-button :value="false">no small</el-radio-button>
|
|||
|
|
<el-radio-button :value="true">small</el-radio-button>
|
|||
|
|
</el-radio-group>
|
|||
|
|
<el-divider direction="vertical" />
|
|||
|
|
<p class="text-sm">分页的对齐方式：</p>
|
|||
|
|
<el-radio-group v-model="paginationAlign" size="small">
|
|||
|
|
<el-radio-button value="right">right</el-radio-button>
|
|||
|
|
<el-radio-button value="center">center</el-radio-button>
|
|||
|
|
<el-radio-button value="left">left</el-radio-button>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-space>
|
|||
|
|
|
|||
|
|
<pure-table
|
|||
|
|
border
|
|||
|
|
row-key="id"
|
|||
|
|
alignWhole="center"
|
|||
|
|
showOverflowTooltip
|
|||
|
|
:size="tableSize as any"
|
|||
|
|
:loading="loading"
|
|||
|
|
:loading-config="loadingConfig"
|
|||
|
|
:height="tableSize === 'small' ? 352 : 440"
|
|||
|
|
:data="
|
|||
|
|
dataList.slice(
|
|||
|
|
(pagination.currentPage - 1) * pagination.pageSize,
|
|||
|
|
pagination.currentPage * pagination.pageSize
|
|||
|
|
)
|
|||
|
|
"
|
|||
|
|
:columns="columns"
|
|||
|
|
:pagination="pagination"
|
|||
|
|
@page-size-change="onSizeChange"
|
|||
|
|
@page-current-change="onCurrentChange"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</template>
|