Ant Design表格组件设置:scroll="{ x: 1200,y:'calc(100.vh - 360px)'}"y 怎样可以设置为一个参数
时间: 2024-03-01 08:54:56 浏览: 97
如果你想将 `scroll` 属性中的 `y` 属性设置为一个变量或参数,你可以将 `scroll` 属性设置为一个对象,并在对象中动态设置 `x` 和 `y` 属性。例如:
```
const tableHeight = 'calc(100vh - 360px)';
const scroll = { x: 1200, y: tableHeight };
<Table
columns={columns}
dataSource={dataSource}
scroll={scroll}
/>
```
这里,我们首先创建一个名为 `tableHeight` 的变量,并将其设置为 `'calc(100vh - 360px)'`。然后,我们创建一个名为 `scroll` 的对象,并将其设置为 `{ x: 1200, y: tableHeight }`。这样,我们就可以动态设置 `y` 属性,并将其设置为 `tableHeight` 变量的值。
这种方法可以帮助你在不同的场景中动态设置 `scroll` 属性中的 `y` 属性,使其更加灵活和易于使用。
相关问题
Ant Design表格组件设置:scroll="{ x: 1200,y:'calc(100.vh - 360px)'}"高度不生效
当表格的 scroll 属性时,需要将表格包裹在一个容器内,并设置容器的高度。在这种情况下,你可以使用CSS样式来设置容器的高度,例如:
```
<div style={{ height: 'calc(100vh - 360px)' }}>
<Table
columns={columns}
dataSource={dataSource}
scroll={{ x: 1200, y: 500 }}
/>
</div>
```
这里,我们使用一个`<div>`元素作为容器,并将其高度设置为 `calc(100vh - 360px)`。然后将表格包裹在这个容器中,并设置 `scroll` 属性,其中 `y` 属性设置为 `500`。这样就可以在表格高度超出容器高度时生成垂直滚动条。
请注意,如果你在 `scroll` 属性中设置了 `y` 属性,则需要确保容器的高度足够小,以便在表格数据不足时也可以正常显示表格。
vue 项目中Ant Design表格组件设置:scroll="{ x: 1200,y:'calc(100.vh - 360px)'}"y 怎样可以设置为一个参数
可以将 "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` 属性传递给表格组件。这样就可以动态地获取窗口高度,而不需要在模板中硬编码一个固定的值。
阅读全文