vxe-table中X轴增加滚动条
时间: 2023-10-12 20:33:44 浏览: 250
如果你想在 `vxe-table` 的 X 轴增加滚动条,可以通过设置 `scroll-x` 属性来实现。具体操作如下:
1. 在 `vxe-table` 组件上添加 `scroll-x` 属性,值为布尔型,表示是否启用 X 轴滚动条。
```
<vxe-table :scroll-x="true"></vxe-table>
```
2. 如果你希望滚动条可以自动适应表格的宽度,可以设置 `max-width` 属性。
```
<vxe-table :scroll-x="true" :max-width="1200"></vxe-table>
```
以上是基本的设置方法,你可以根据实际情况进行调整和优化。希望能够帮到你!
相关问题
vxe-grid表格X轴都加上滚动条
如果您想在vxe-grid表格中添加一个横向滚动条,可以使用CSS属性 `overflow-x: auto;`。以下是一个简单的示例:
```css
/* 将表格添加横向滚动条 */
.vxe-table--striped .vxe-table--border .vxe-table--fit tbody {
overflow-x: auto;
}
```
您可以将上述CSS样式添加到您的样式表中,或者在需要的组件中使用 `style` 属性来添加它。请注意,如果您的表格列宽度太小,可能会导致表格出现滚动条。因此,您需要根据您的具体情况来调整表格的列宽度。
vxe-table 3.x 虚拟滚动实例
以下是vxe-table 3.x版本的虚拟滚动实例:
```vue
<template>
<div>
<vxe-table
:data="tableData"
:columns="columns"
height="400px"
border
resizable
show-overflow
highlight-current-row
virtual-scroll
></vxe-table>
</div>
</template>
<script>
import 'vxe-table/lib/style.css';import { VXETable } from 'vxe-table';
import XEUtils from 'xe-utils';
export default {
data() {
return {
tableData: [],
columns: [
{ field: 'name', title: '姓名', width: 100 },
{ field: 'age', title: '年龄', width: 100 },
{ field: 'address', title: '地址', width: 200 },
{ field: 'email', title: '邮箱', width: 200 },
{ field: 'phone', title: '电话', width: 150 },
{ field: 'company', title: '公司', width: 200 },
{ field: 'job', title: '职位', width: 150 },
{ field: 'date', title: '日期', width: 150 }
]
};
},
created() {
this.tableData = XEUtils.mapTree(XEUtils.times(10000, index => {
return {
id: 1000 + index,
name: '测试数据' + (index + 1),
age: XEUtils.toValueString(20 + XEUtils.random(10, 50)),
address: '地址' + (index + 1),
email: 'test' + (index + 1) + '@test.com',
phone: '1300000000' + XEUtils.toValueString(XEUtils.random(1000, 9999)),
company: '公司' + (index + 1),
job: '职位' + (index + 1),
date: XEUtils.toDateString(XEUtils.randomDate('2010-01-01', '2022-12-31'), 'yyyy-MM-dd HH:mm:ss')
};
}), {
key: 'id',
parentKey: 'pid'
});
},
mounted() {
VXETable.use(VXETable.VXETablePluginVirtualTree);
}
};
</script>
```