el-tooltip失效问题（button disabled）

今天遇到一个问题，就是在表格操作一栏有一个预览房源的功能（需求是当房源在售时不可查看，即禁用按钮并显示不支持查看的浮窗）

刚开始的思路：通过三元运算符简略代码的写法，可是不管怎么调试，只要按钮处于禁用状态就是不会有浮窗出现，后来百度了一番，发现时按钮的disabled属性会影响el-tooltip

<el-table-column
    label="操作"
    align="left"
    min-width="200"
    show-overflow-tooltip
    >
    <template v-slot="scope">
      <el-button
        type="text"
        class="operate-btn"
        @click="lookDetail(scope.row)"
        >查看面访数据</el-button
      >
      <el-tooltip
        placement="right"
        :disabled="scope.row.plate == '在售' ? true : false"
      >
        <div slot="content">房源非在售，暂不支持查看</div>
        <el-button
          @click="toHouseDetail(scope.row)"
          type="text"
          :class="
            scope.row.plate == '在售'
              ? 'operate-btn'
              : 'dis-operate-btn'
          "
          :disabled="scope.row.plate == '在售' ? false : true"
          >预览房源</el-button
        >
      </el-tooltip>
    </template>
</el-table-column>

后来的解决办法：将每一个按钮用div包裹起来，使得允许点击和不允许点击的按钮分开，这样将不影响el-tooltip，还有一种方法是使用两个按钮，禁用状态的按钮不用disabled，用样式做成禁用状态

<template v-slot="scope">
  <div class="flex">
    <el-button
      type="text"
      class="operate-btn"
      @click="lookDetail(scope.row)"
      >查看面访数据</el-button
    >
    <el-tooltip
      placement="right"
      :disabled="scope.row.plate == '在售' ? true : false"
    >
      <div slot="content">房源非在售，暂不支持查看</div>
      <div v-if="scope.row.plate == '在售'">
        <el-button
          @click="toHouseDetail(scope.row)"
          type="text"
          class="operate-btn"
          >预览房源</el-button
        >
      </div>
      <div v-else>
        <el-button
          @click="toHouseDetail(scope.row)"
          type="text"
          class="dis-operate-btn"
          disabled
          >预览房源</el-button
        >
      </div>
    </el-tooltip>
  </div>
</template>