如何禁止在sortable拖拽单元格时其他单元格自动上调
时间: 2024-03-16 21:41:00 浏览: 29
如果你想禁止在`vxetable`中使用`sortable`拖拽单元格时其他单元格自动上调,可以通过设置`sortable`的`ghost-class`属性来实现。具体步骤如下:
1. 在`<vxe-table>`标签上添加`sortable`属性,值为`true`,表示开启排序功能。
2. 在`<vxe-table-column>`标签上添加`sortable`属性,值为`custom`,表示自定义排序方式。
3. 在`<vxe-table-column>`标签上添加`ghost-class`属性,值为一个空字符串,表示禁止其他单元格自动上调。
下面是一个示例代码:
```html
<template>
<vxe-table :data="tableData" :sortable="true">
<vxe-table-column field="id" title="ID" sortable="custom" :ghost-class="''"></vxe-table-column>
<vxe-table-column field="name" title="Name"></vxe-table-column>
<vxe-table-column field="age" title="Age"></vxe-table-column>
</vxe-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'John', age: 20 },
{ id: 2, name: 'Mary', age: 25 },
{ id: 3, name: 'Jack', age: 30 },
{ id: 4, name: 'Lisa', age: 35 }
]
}
}
}
</script>
```
在上面的示例中,我们在`<vxe-table>`标签中开启了排序功能,并在`<vxe-table-column>`标签中将`sortable`属性设置为`custom`,表示自定义排序方式。然后在`<vxe-table-column>`标签中将`ghost-class`属性设置为空字符串,表示禁止其他单元格自动上调。这样就可以禁止其他单元格自动上调了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)