el-table操作列显示更多
时间: 2023-08-04 21:04:30 浏览: 209
您可以在el-table的columns中定义一个slot来实现操作列的显示更多。具体做法如下:
1. 在columns中定义一个type为'operation'的column,该column的width可以根据您的需求进行设置。
2. 在该column中定义一个slot,用来放置操作按钮。
3. 在该slot中,可以定义多个按钮,您可以使用el-button或其他UI组件来实现,同时可以为按钮绑定点击事件。
4. 如果您的操作按钮过多,可以使用el-dropdown组件来进行收纳。
以下是一个示例代码片段:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column label="操作" width="200" type="operation">
<template slot-scope="scope">
<el-dropdown>
<el-button type="primary">更多操作</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click="handleEdit(scope.$index, scope.row)">编辑</el-dropdown-item>
<el-dropdown-item @click="handleDelete(scope.$index, scope.row)">删除</el-dropdown-item>
<el-dropdown-item @click="handleView(scope.$index, scope.row)">查看</el-dropdown-item>
<!-- 更多按钮 -->
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
```
在上述示例中,我们定义了一个type为'operation'的column,并在该column中定义了一个slot。在该slot中,我们使用了el-dropdown组件来收纳操作按钮。您可以根据实际需求来定义操作按钮及其事件处理函数。
阅读全文