在使用el-table时,操作列需要加一个下拉菜单对选中行进行操作。
使用el-dropdown, element官网上是在组件加@command方法,但是像官网这样只能拿到点击项的key没法拿到表格当前行的信息,可以使用以下方式:
//官网
@command="handleCommand"
//解决方式
@command="(command) => {
clickDropDown(command, row);
}
"
示例:
<el-table-column label="操作">
<template #default="{ row }">
<el-dropdown
trigger="click"
v-if="row.actionList.length > 2"
class="drop-icon"
@command="
(command) => {
clickDropDown(command, row);
}
"
>
<span>按钮</span>
<template #dropdown>
<el-dropdown-item
v-for="item in row.actionList"
:key="item"
:command="item"
>
{{ item]}}</el-dropdown-item
>
</template>
</el-dropdown>
</template>
</el-table-column>