El-tooltip failure (Button Disabled)

I met a problem today, that is, there is a preview function in the operation column of the table (the requirement is that when the house is not available for viewing, that is, the button is disabled and the floating window that does not support viewing is displayed).

In the beginning, THE idea was to write simple code with teradic operators, but no matter how debugging, as long as the button is disabled, there will be no floating window. Later, Baidu found that the disabled button will affect the el-tooltip

<el-table-column
    label="Operation"
    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 == 'on sale'? true : false"
      >
        <div slot="content">The house is not for sale, temporarily do not support viewing</div>
        <el-button
          @click="toHouseDetail(scope.row)"
          type="text"
          :class="Scope.row. plate == 'on sale'? 'operate-btn' : 'dis-operate-btn' "
          :disabled="Scope.row. plate == 'on sale'? false : true"
          ></el-button ></el-tooltip>
    </template>
</el-table-column>
Copy the code

A later solution: wrap each button in a div, separating the buttons that are allowed to be clicked from the ones that are not allowed to be clicked, which would not affect the el-Tooltip. Another solution is to use two buttons, and instead of disabling the button, style the disabled state

<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 == 'on sale'? true : false"
    >
      <div slot="content">The house is not for sale, temporarily do not support viewing</div>
      <div v-if="Scope.row. plate == 'on sale '">
        <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>
Copy the code