134 lines
2.9 KiB
Vue
134 lines
2.9 KiB
Vue
|
<docs>
|
|||
|
|
---
|
|||
|
|
order: 99
|
|||
|
|
title:
|
|||
|
|
en-US: Fixed header and scroll bar with the page
|
|||
|
|
zh-CN: 随页面滚动的固定表头和滚动条
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## zh-CN
|
|||
|
|
|
|||
|
|
对于长表格，需要滚动才能查看表头和滚动条，那么现在可以设置跟随页面固定表头和滚动条。
|
|||
|
|
|
|||
|
|
## en-US
|
|||
|
|
|
|||
|
|
For long table，need to scroll to view the header and scroll bar，then you can now set the fixed header and scroll bar to follow the page.
|
|||
|
|
|
|||
|
|
</docs>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<a-table sticky :columns="columns" :data-source="data" :scroll="{ x: 1500 }">
|
|||
|
|
<template #bodyCell="{ column }">
|
|||
|
|
<template v-if="column.key === 'operation'"><a>action</a></template>
|
|||
|
|
</template>
|
|||
|
|
<template #summary>
|
|||
|
|
<a-table-summary>
|
|||
|
|
<a-table-summary-row>
|
|||
|
|
<a-table-summary-cell :index="0" :col-span="2">Fix Left</a-table-summary-cell>
|
|||
|
|
<a-table-summary-cell :index="2" :col-span="8">Scroll Context</a-table-summary-cell>
|
|||
|
|
<a-table-summary-cell :index="10">Fix Right</a-table-summary-cell>
|
|||
|
|
</a-table-summary-row>
|
|||
|
|
</a-table-summary>
|
|||
|
|
</template>
|
|||
|
|
</a-table>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
import { defineComponent, ref } from 'vue';
|
|||
|
|
|
|||
|
|
export default defineComponent({
|
|||
|
|
setup() {
|
|||
|
|
const columns = ref([
|
|||
|
|
{
|
|||
|
|
title: 'Full Name',
|
|||
|
|
width: 100,
|
|||
|
|
dataIndex: 'name',
|
|||
|
|
key: 'name',
|
|||
|
|
fixed: 'left',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'Age',
|
|||
|
|
width: 100,
|
|||
|
|
dataIndex: 'age',
|
|||
|
|
key: 'age',
|
|||
|
|
fixed: 'left',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'Column 1',
|
|||
|
|
dataIndex: 'address',
|
|||
|
|
key: '1',
|
|||
|
|
width: 150,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'Column 2',
|
|||
|
|
dataIndex: 'address',
|
|||
|
|
key: '2',
|
|||
|
|
width: 150,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'Column 3',
|
|||
|
|
dataIndex: 'address',
|
|||
|
|
key: '3',
|
|||
|
|
width: 150,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'Column 4',
|
|||
|
|
dataIndex: 'address',
|
|||
|
|
key: '4',
|
|||
|
|
width: 150,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'Column 5',
|
|||
|
|
dataIndex: 'address',
|
|||
|
|
key: '5',
|
|||
|
|
width: 150,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'Column 6',
|
|||
|
|
dataIndex: 'address',
|
|||
|
|
key: '6',
|
|||
|
|
width: 150,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'Column 7',
|
|||
|
|
dataIndex: 'address',
|
|||
|
|
key: '7',
|
|||
|
|
width: 150,
|
|||
|
|
},
|
|||
|
|
{ title: 'Column 8', dataIndex: 'address', key: '8' },
|
|||
|
|
{
|
|||
|
|
title: 'Action',
|
|||
|
|
key: 'operation',
|
|||
|
|
fixed: 'right',
|
|||
|
|
width: 100,
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const data = [];
|
|||
|
|
for (let i = 0; i < 100; i++) {
|
|||
|
|
data.push({
|
|||
|
|
key: i,
|
|||
|
|
name: `Edrward ${i}`,
|
|||
|
|
age: 32,
|
|||
|
|
address: `London Park no. ${i}`,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
data,
|
|||
|
|
columns,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
#components-table-demo-summary tfoot th,
|
|||
|
|
#components-table-demo-summary tfoot td {
|
|||
|
|
background: #fafafa;
|
|||
|
|
}
|
|||
|
|
[data-theme='dark'] #components-table-demo-summary tfoot th,
|
|||
|
|
[data-theme='dark'] #components-table-demo-summary tfoot td {
|
|||
|
|
background: #1d1d1d;
|
|||
|
|
}
|
|||
|
|
</style>
|