vxe-table :columns
时间: 2023-11-08 10:03:45 浏览: 193
vxe-table 是一个基于 Vue.js 的表格组件库,用于创建和展示数据表格。在使用 vxe-table 时,需要定义 columns 字段来描述表格的列信息。
columns 是一个数组,每个元素代表一个表格的列。每个列对象包含以下属性:
- type: 列的类型,可以是 'seq'(序号列)、'checkbox'(复选框列)或者 'selection'(选择列)。
- field: 列的字段名,用于与数据源中的属性进行关联。
- title: 列的标题。
- width: 列的宽度。
- align: 列的对齐方式,可以是 'left'、'center' 或 'right'。
- sortable: 是否可排序,可以是 true 或 false。
- resizable: 是否可拖动调整列宽,可以是 true 或 false。
- fixed: 是否固定列,可以是 'left'、'right' 或 true。
- filters: 是否可筛选,可以是一个数组,每个元素代表一个筛选项。
- filterMethod: 自定义筛选方法的回调函数。
示例代码如下:
```javascript
columns: [
{ type: 'selection', width: 50, align: 'center' },
{ field: 'name', title: '姓名', sortable: true },
{ field: 'age', title: '年龄', sortable: true },
{ field: 'gender', title: '性别', sortable: true },
],
```
阅读全文
相关推荐
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)