ElementUI弹窗el-dialog自定义头部后点右上角的'失效、点不了BUG

尝试网上百度找了很多文章也没找到跟此问题相关的解决方案，记录一下方便大家查阅！！！
描述：el-dialog弹窗自定义头部后点右上角的'x'失效、点不了,点了没反应BUG

 代码：

<el-dialog
      title="计划选择"
      :visible.sync="dialogVisible"
      width="90%"
    >
      <template slot="title">
        <div style="height: 30px;line-height: 30px;">
          <span style="font-size: 16px;font-weight: 700;color: #172b4d;display: inline-block;">计划选择</span>
          <el-select
            placeholder="请选择模板"
            @change="changeMaterial"
            style="width: 250px;margin-left: 10px"
            v-model="tplFieldMainId"
          >
            <el-option
              v-for="item in templateOptions"
              :key="item.id"
              :label="item.tplName"
              :value="item.id">
            </el-option>
          </el-select>
          <button type="button" @click="handleClose" aria-label="Close" class="el-dialog__headerbtn"><i
            class="el-dialog__close el-icon el-icon-close"></i></button>
        </div>
      </template>
<div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmRecommend">确认</el-button>
      </div>
    </el-dialog>

解决问题的关键代码：在头部的插槽里把关闭按钮加上，因为通过自定义头部的内容跟原本的样式有冲突了，导致点击‘x’点不到，自然就触发不了关闭事件

<button type="button" @click="handleClose" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button>

　　handleClose() {

      this.dialogVisible = false

    },