无殇氪金挖矿 2021-03-10 11:31 采纳率: 100%
浏览 935
已采纳

element-dialog在el-autocomplete使用下拉框被遮罩怎么解决??

 

代码

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">

    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>

      <el-autocomplete v-model="data" placeholder="请输入内容" :fetch-suggestions="querySearch"
                       @select="mySelect"></el-autocomplete>
    </el-dialog>

  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      dialogVisible: false,
      queryData: [{
        "value": "这是选项一",
        "data": "选项一数据"
      }, {
        "value": "这是选项二",
        "data": "选项二数据"
      }]
    }
  },
  methods: {
    querySearch(queryString, cb) {
      cb(this.queryData)
    },
    handleClose(done) {
      this.$confirm('确认关闭?')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    }
  }
}
</script>
  • 写回答

1条回答 默认 最新

  • 打杂的程序员 2021-03-10 11:41
    关注

    是z-index大小问题 其中autocomplete的z-index是2003,而dialog的z-index是2006,所以建议将dialog的z-index改小。

    重写他的css

    .el-dialog__wrapper{

    z-index:2000 !important

    }

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 TLS1.2协议通信解密
  • ¥40 图书信息管理系统程序编写
  • ¥20 Qcustomplot缩小曲线形状问题
  • ¥15 企业资源规划ERP沙盘模拟
  • ¥15 树莓派控制机械臂传输命令报错,显示摄像头不存在
  • ¥15 前端echarts坐标轴问题
  • ¥15 ad5933的I2C
  • ¥15 请问RTX4060的笔记本电脑可以训练yolov5模型吗?
  • ¥15 数学建模求思路及代码
  • ¥50 silvaco GaN HEMT有栅极场板的击穿电压仿真问题