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

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

    }

    评论
    解决 2 无用
    打赏 举报

相关推荐 更多相似问题