期望的效果:
手机打开页面,下拉菜单错位了:
所以在el-dropdown-menu 中 增加了?:append-to-body="false",不插入到body,同时需要修改样式:
// style.scss
.el-table{
.el-dropdown-menu{
top: 23px !important;
left: auto !important;
right: 0 !important;
width: 60px;
margin-top: 0 !important;
}
// 如果不加下面这个样式,下拉框会被遮挡住。
// operate 用于 el-table-column上的样式
.operate{
.cell{
overflow: inherit !important;
}
}
}
<el-table-column label="操作" align="center" width="120px" fixed="right"
class-name="operate">
<template slot-scope="scope">
<el-button type="text" @click="goDetail(scope.row)">查看</el-button>
<el-dropdown trigger="click" v-if="scope.row.state != '3' && scope.row.state !=
'2'">
<span class="el-dropdown-link">
变更状态<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown" :append-to-body="false">
<el-dropdown-item command="1" v-if="scope.row.state == '0'" @click.native="handleCommand(scope.row, '1')">受理中</el-dropdown-item>
<el-dropdown-item command="2" v-if="scope.row.state == '1' || scope.row.state == '0'" @click.native="handleCommand(scope.row, '2')">跟进中</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
注:
select也存在同样的问题,如果手机打开页面,下拉框会错位,解决办法类似:
<el-select v-model="form.state" :popper-append-to-body="false">
el-date-picker:
:append-to-body="false"
?
?
|