feat:统一表格
This commit is contained in:
parent
82e9624179
commit
0fdce24a3c
@ -3,6 +3,9 @@
|
||||
width: 100%;
|
||||
&.table {
|
||||
overflow: hidden; //表格需要hidden
|
||||
display: grid;
|
||||
grid-template-rows: 50px 1fr;
|
||||
gap:$normolGap;
|
||||
}
|
||||
&.white-bg {
|
||||
background: #fff;
|
||||
|
@ -5,3 +5,8 @@ $primaryColorSuppl: #5A95FF; // 介于主色和hover之间的蓝色
|
||||
// 字体相关颜色
|
||||
$titleTextColor:#808080; //标题颜色
|
||||
$dashLineColor:#E7E7E7; //border-color的颜色
|
||||
// 间距相关
|
||||
$miniGap:8px;
|
||||
$smallGap:12px;
|
||||
$normolGap:16px;
|
||||
$bigGap:24px;
|
@ -1,8 +1,88 @@
|
||||
<template>
|
||||
<div class="main__container white-bg table">权限管理菜单内容</div>
|
||||
<div class="main__container table">
|
||||
<header class="table-header">
|
||||
<n-input-group style="width:440px">
|
||||
<n-input :style="{ width: '50%' }" placeholder="请输入用户名称" v-model="roleName" />
|
||||
<n-button strong secondary type="primary">
|
||||
搜索
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<SearchOutline />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-input-group>
|
||||
</header>
|
||||
<main class="table-main" ref="tableMainRef">
|
||||
<n-data-table v-if="height" :columns="columns" :data="data" :max-height="`${height}px`"
|
||||
:min-height="`${height}px`" />
|
||||
<div class="table-main__pagination">
|
||||
<n-pagination v-model:page="pagination.page" v-model:page-size="pagination.pageSize" :page-count="data.length"
|
||||
show-size-picker :page-sizes="[10, 20, 30, 40]" />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { SearchOutline } from '@vicons/ionicons5';
|
||||
|
||||
const tableMainRef = ref<HTMLElement | null>(null);
|
||||
const roleName = ref('');
|
||||
const pagination = reactive({
|
||||
pageSize: 10,
|
||||
page: 1,
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age'
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address'
|
||||
}
|
||||
];
|
||||
const height = ref(null);
|
||||
const data = Array.from({ length: 46 }).map((_, index) => ({
|
||||
key: index,
|
||||
name: `Edward King ${index}`,
|
||||
age: 32,
|
||||
address: `London, Park Lane no. ${index}`
|
||||
}));
|
||||
onMounted(() => {
|
||||
if (tableMainRef.value) {
|
||||
height.value = tableMainRef.value.clientHeight - 64 - 50; //减去两次内边距 - 分页的大小
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.table-header {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 $normolGap;
|
||||
}
|
||||
|
||||
.table-main {
|
||||
background: #fff;
|
||||
padding: $normolGap;
|
||||
border-radius: 4px;
|
||||
height: calc(100% - 2 * $normolGap);
|
||||
|
||||
&__pagination {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
x
Reference in New Issue
Block a user