el-table把有操作按钮的行排在前面
时间: 2024-01-12 20:04:30 浏览: 100
可以通过设置 `default-sort` 属性和 `scoped-slot` 来实现将有操作按钮的行排在前面。具体步骤如下:
1. 在 `el-table` 标签中设置 `default-sort` 属性,指定要排序的列和排序方式。例如:`default-sort="{prop: 'isOperable', order: 'descending'}"`
2. 在数据源中添加一个 `isOperable` 属性,用于表示该行是否有操作按钮。例如:`{name: '张三', age: 20, isOperable: true}`
3. 在表格中使用 `scoped-slot` 来自定义表格行的样式,并添加操作按钮。例如:
```html
<el-table-column label="操作">
<template slot-scope="scope">
<div v-if="scope.row.isOperable">
<el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
</div>
</template>
</el-table-column>
```
4. 在样式中设置 `.el-table__row.is-operable` 类的样式,例如:
```css
.el-table__row.is-operable {
background-color: #f5f7fa;
}
```
这样就可以将有操作按钮的行排在前面,并且将其背景色改为灰色。
阅读全文