vue 项目中Ant Design表格组件设置:scroll="{ x: 1200,y:'calc(100.vh - 360px)'}"y 怎样可以设置为一个参数
时间: 2024-03-01 14:55:07 浏览: 52
可以将 "calc(100vh - 360px)" 这个值作为一个变量来传递,然后在组件中使用这个变量即可,例如:
```
<template>
<div>
<a-table :scroll="scrollConfig"></a-table>
</div>
</template>
<script>
export default {
data() {
return {
scrollConfig: {
x: 1200,
y: this.getScrollY()
}
}
},
methods: {
getScrollY() {
const windowHeight = window.innerHeight
const scrollY = `calc(${windowHeight}px - 360px)`
return scrollY
}
}
}
</script>
```
在这个例子中,我们使用了一个 `getScrollY` 方法来计算滚动条的纵向高度,然后将这个值作为 `scrollConfig` 对象的 `y` 属性传递给表格组件。这样就可以动态地获取窗口高度,而不需要在模板中硬编码一个固定的值。
相关问题
antdesign vue 2 表格动态scroll
您可以使用Ant Design Vue 2的Table组件,并使用scroll属性来实现表格的动态滚动。以下是示例代码:
```html
<template>
<a-table :columns="columns" :data-source="data" :scroll="{ y: 400 }"></a-table>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
],
data: [
{
key: 1,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: 2,
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
...
],
};
},
};
</script>
```
在示例中,我们将表格的高度设置为400px,并将其应用于scroll属性。这使表格在超过400px高度时出现纵向滚动条。您可以根据需要调整scroll属性的值。
阅读全文
相关推荐
















