html
复制代码
<template>
<div :class="$options.name">
<el-table :data="tableData">
<el-table-column type="index" label="序号" width="60" />
<!-- 主要列 BEGIN---------------------------------------- -->
<el-table-column label="姓名">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<!-- 主要列 END---------------------------------------- -->
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
@click.stop="edit(scope.row)"
@dblclick.native.stop
>修改</el-button
>
<el-button
size="mini"
type="danger"
@click.stop="del(scope.row)"
@dblclick.native.stop
>删除</el-button
>
<!-- 更多操作 -->
<el-dropdown
style="margin-left: 10px"
:show-timeout="0"
:placement="`bottom-end`"
@command="(c) => dropdownItems.find((v) => v.label == c).clickEvent(c, scope)"
>
<span style="cursor: default">更多<i class="el-icon-arrow-down" /></span>
<el-dropdown-menu
slot="dropdown"
style="
transition: none;
overflow-y: auto;
max-height: 400px;
margin-top: 5px;
"
>
<el-dropdown-item
v-for="(d, i) in dropdownItems"
:command="d.label"
:key="i"
:divided="d.divided"
v-if="typeof d.hide === 'function' ? !d.hide(d, scope) : !d.hide"
:disabled="
typeof d.disabled === 'function' ? d.disabled(d, scope) : d.disabled
"
:type="d.type"
>
<i :class="d.icon" v-if="d.icon" />{{ d.label }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "moreDropdown",
data() {
return {
dropdownItems: [
{
hide: true,
label: "编辑",
clickEvent: (c, scope) => {
// this.edit(scope.row);
},
},
{
disabled: true,
label: "重命名",
icon: `el-icon-edit`,
clickEvent: (c, scope) => {
// this.edit_rename(scope.row);
},
},
{
label: "分享",
icon: `el-icon-share`,
clickEvent: (c, scope) => {
console.log(c, scope.row);
// this.share(scope.row);
},
},
{
label: "下载",
type: "success",
icon: `el-icon-download`,
clickEvent: (c, scope) => {
console.log(c, scope.row);
// this.download(scope.row);
},
},
{
divided: true,
label: "删除",
icon: `el-icon-delete`,
type: "danger",
clickEvent: (c, scope) => {
// this.del([scope.row]);
},
},
],
tableData: [
{ name: "姓名1" },
{ name: "姓名2" },
{ name: "姓名3" },
{ name: "姓名4" },
{ name: "姓名5" },
],
};
},
};
</script>
<style lang="scss" scoped>
.moreDropDown {
// 下拉选择菜单----------------------------------------
.el-dropdown-menu__item {
&[type="danger"] {
color: #f56c6c;
&:hover {
color: #f56c6c;
background-color: #f56c6c22;
}
}
&[type="success"] {
color: #67c23a;
&:hover {
color: #67c23a;
background-color: #67c23a22;
}
}
&[type="warning"] {
color: #e6a23c;
&:hover {
color: #e6a23c;
background-color: #e6a23c22;
}
}
&[type="info"] {
color: #909399;
&:hover {
color: #909399;
background-color: #90939922;
}
}
}
}
</style>
