我这里是结合el-table一起使用
设置trigger="click" 就可以加点击事件
这里我需要点击下拉选择值后,既要得到下拉里面的值 也要得到这一行数据的值
重要的代码
<el-dropdown
trigger="click"
@command="handleCommand($event,scope.row,scope.$index)"
@visible-change="changeDrop(scope.$index,'其他值')"
>
handleCommand(item,row,index) {
console.log(item,"item")//下拉菜单里面的值
console.log(row,"row")//表格里面的数据
console.log(index,"index")//1 表格列下标
this.tableData[index].auth = item.value
}
changeDrop(index, item) { //可以得到表格的值
console.log(item,"cccc")//其他值
this.tableData[index].auth = "赋值"
},
data(){
return{
permissionOptions: [
{ value: '1', label: '仅使用' },
{ value: '2', label: '可复制' },
{ value: '3', label: '可编辑' },
// { value:"0",label: '移除权限' },
],
}
}
<el-table-column align="center" prop="handle" label="操作">
<template slot-scope="scope">
<div style="margin-right:10px">
<el-dropdown
trigger="click"
@command="handleCommand($event,scope.row)"
@visible-change="changeDrop(scope.$index)"
>
<span class="el-dropdown-link">
<el-button type="primary" size="mini"
>{{ scope.row.auth == '1' ? '仅使用' : '可复制'
}}<i class="el-icon-arrow-down el-icon--right"></i
></el-button>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
:command="item"
v-for="(item, index) in permissionOptions"
:key="index"
>{{ item.label }}</el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
</el-table-column>