vue Sortable.js antd怎么增加表格拖拽的高度 不只是小范围拖拽
时间: 2024-04-10 11:26:58 浏览: 22
如果你使用Vue Sortable.js和Ant Design (antd)来实现表格拖拽,并且想要增加整个表格的拖拽高度,可以按照以下步骤进行操作:
1. 使用CSS样式设置高度:为包含表格的容器元素添加一个自定义的class或id,并在CSS文件中设置该class或id的高度。
```html
<template>
<div class="custom-container">
<table>
<!-- 表格内容 -->
</table>
</div>
</template>
<style>
.custom-container {
height: 400px; /* 设置你想要的高度 */
}
</style>
```
2. 使用Ant Design的Table组件并结合Sortable.js:在Vue组件中,使用Ant Design的Table组件来展示表格数据,并将其包裹在Sortable.js的SortableContainer组件中。然后,使用CSS样式调整表格容器的高度。
```html
<template>
<div class="custom-container">
<sortable-container>
<a-table>
<!-- 表格内容 -->
</a-table>
</sortable-container>
</div>
</template>
<style>
.custom-container {
height: 400px; /* 设置你想要的高度 */
}
</style>
```
请注意,具体实现方式可能会因你的项目结构和使用的版本而有所不同。以上是一些基本的示例代码,你可以根据实际情况进行调整。希望对你有所帮助!
相关推荐
![vue](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)