ant-design-vue/components/table/demo/fixed-columns.md

67 lines
2.1 KiB
Markdown
Raw Normal View History

2018-04-03 06:34:54 +00:00
<cn>
#### 固定列
对于列数很多的数据,可以固定前后的列,横向滚动查看其它数据,需要和 `scroll.x` 配合使用。
2019-04-30 08:59:53 +00:00
> 若列头与内容不对齐或出现列重复,请指定**固定列**的宽度 `width`。
2018-04-03 06:34:54 +00:00
> 建议指定 `scroll.x` 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 `scroll.x`。
</cn>
<us>
#### Fixed Columns
2018-04-07 06:29:59 +00:00
To fix some columns and scroll inside other columns, and you must set `scroll.x` meanwhile.
2019-04-30 08:59:53 +00:00
> Specify the width of columns if header and cell do not align properly.(Leave one column at least without width to fit fluid layout)
2018-04-03 06:34:54 +00:00
> A fixed value which is greater than table width for `scroll.x` is recommended. The sum of unfixed columns should not greater than `scroll.x`.
</us>
2019-10-09 10:32:23 +00:00
```tpl
2018-04-03 06:34:54 +00:00
<template>
<a-table :columns="columns" :dataSource="data" :scroll="{ x: 1300 }">
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 13:28:54 +00:00
<a slot="action" slot-scope="text" href="javascript:;">action</a>
2018-04-03 06:34:54 +00:00
</a-table>
</template>
<script>
2019-09-28 12:45:07 +00:00
const columns = [
{ 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' },
{ title: 'Column 2', dataIndex: 'address', key: '2' },
{ title: 'Column 3', dataIndex: 'address', key: '3' },
{ title: 'Column 4', dataIndex: 'address', key: '4' },
{ title: 'Column 5', dataIndex: 'address', key: '5' },
{ title: 'Column 6', dataIndex: 'address', key: '6' },
{ title: 'Column 7', dataIndex: 'address', key: '7' },
{ title: 'Column 8', dataIndex: 'address', key: '8' },
{
title: 'Action',
key: 'operation',
fixed: 'right',
width: 100,
scopedSlots: { customRender: 'action' },
},
];
2018-04-03 06:34:54 +00:00
2019-09-28 12:45:07 +00:00
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York Park',
},
{
key: '2',
name: 'Jim Green',
age: 40,
address: 'London Park',
},
];
2018-04-03 06:34:54 +00:00
2019-09-28 12:45:07 +00:00
export default {
data() {
return {
data,
columns,
};
},
};
2018-04-03 06:34:54 +00:00
</script>
```