vxe-table grid 拖动列
时间: 2023-09-11 18:04:54 浏览: 627
vxe-table 是一个基于 Vue.js 的表格组件库,它提供了丰富的功能和灵活的配置选项,其中包括拖动列功能。
要启用拖动列功能,需要在表格组件上添加 `resizable` 属性,并在列配置中设置 `resizable: true`。这将允许用户通过拖动列边缘来调整列宽度。
如果想要实现拖动列的排序功能,可以使用 `sortable` 属性,它允许用户通过拖动列头来对表格数据进行排序。
以下是一个简单的示例代码:
```vue
<template>
<vxe-table
:data="tableData"
resizable
>
<vxe-table-column
type="index"
width="60"
/>
<vxe-table-column
field="name"
title="Name"
resizable
sortable
/>
<vxe-table-column
field="age"
title="Age"
resizable
sortable
/>
<vxe-table-column
field="address"
title="Address"
resizable
sortable
/>
</vxe-table>
</template>
<script>
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
export default {
data() {
return {
tableData: [
{ name: 'John Doe', age: 30, address: '123 Main St' },
{ name: 'Jane Smith', age: 25, address: '456 Maple Ave' },
{ name: 'Bob Johnson', age: 40, address: '789 Elm St' }
]
}
},
mounted() {
VXETable.init()
}
}
</script>
```
在上面的示例中,我们设置了表格组件的 `resizable` 属性,以启用拖动列功能。然后,在每个列配置中,我们设置了 `resizable` 和 `sortable` 属性,以允许用户调整列宽度和排序数据。
注意,在使用 vxe-table 时,需要先引入 `xe-utils` 和 `vxe-table` 库,并调用 `VXETable.init()` 方法进行初始化。