el-table有哪些属性
时间: 2024-09-22 08:01:33 浏览: 60
`el-table` 是 Element UI 提供的一个强大且常用的表格组件,它支持丰富的数据展示和交互功能。下面是一些主要的 `el-table` 属性及其用途:
1. **data**: 必填,数组形式的数据源,每一项通常代表一行数据。
2. **columns**: 列配置,包含每个列的信息,例如标题、数据格式、排序等。
3. **row-key**: 如果数据不是对象数组,需要提供这个属性来标识每行唯一的键。
4. **show-header**: 是否显示表头,默认为 true。
5. **stripe**: 是否启用条纹样式,给表格添加交替背景色,默认为 false。
6. **border**: 是否显示边框,默认为 true。
7. **header-align**: 表头文字对齐方式,如 "left", "right", "center" 等。
8. **cell-class-name**: 根据单元格的内容动态设置 CSS 类名。
9. **tooltip**: 设置单元格内文本的提示信息。
10. **sortable**: 设置列是否可排序,可以是对象(默认开启)或布尔值。
11. **filters**: 定义列的过滤条件。
12. **filter-method**: 自定义过滤函数,用于处理用户输入的过滤条件。
13. ** scoped-columns**: 当 table 的列需要嵌套时,可以使用此属性定义嵌套的列结构。
此外,还有一些事件属性如 `@selection-change` (选择改变),`@sort-change` (排序改变),`@row-click` (行点击) 等,用于监听用户的交互行为。
例子:
```html
<el-table :data="tableData" :columns="columns">
<!-- ... -->
</el-table>
```
其中,`tableData` 是数据源数组,`columns` 包含了列的配置信息,例如:
```javascript
columns: [
{ field: 'name', title: '姓名' },
{ field: 'age', title: '年龄', sortable: true }
]
```
阅读全文