持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

前言

最近在做项目，使用的是vue + elementUI, 遇到了一些问题，这里把这些问题记录下，以及是怎么解决的。方便后续查阅。

问题

el-tooltip和el-button嵌套使用导致el-tooltip失效

正常我们使用el-tooltip和el-button，是没有问题，官方例子也是这样写的。

    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
      <span>
        <el-button type="primary">上左</el-button>
      </span>
    </el-tooltip>

但是我们有个需求，要在el-button加上disabled属性。然后就导致了el-tooltip失效了。

如下：

鼠标滑过的时候el-tooltip并没有生效。

所以应该跟加的disabled属性有关。

通过上面可知，el-button是通过原生的disabled来设置禁用的。

而el-tooltip是通过事件（mouseenter/mouseleave）监听显示和隐藏的。

所以一旦元素被设置了disabled属性，它本身的事件就不能触发了。所以el-tooltip就失效了。

要解决这个问题，可以在el-button外包一层div或者span。这样el-button的disabled属性和mouseenter/mouseleave事件就分开了，就没有影响了。

    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
      <span>
        <el-button type="primary" :disabled="true">上左</el-button>
      </span>
    </el-tooltip>

el-table和el-popover嵌套使用导致el-popover失效

我这边需要在el-table嵌套使用el-popover,然后需要在popover显示之后还要点击里面的按钮执行操作后关闭popover。

这里就需要定义一个变量，控制popover的显示。

但是下面这个写法导致popover直接无法显示。点击没有任何反应。

模拟代码如下：

  <template>
  <el-table :data="tableData" border>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-popover v-model="status" placement="top-start" width="200" trigger="click">
          <el-button @click="status = false">hide</el-button>
          <el-button slot="reference">show</el-button>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
</template>   
<script>
export default {
  data () {
    return {
      status: false,
      tableData: [{}, {}]
    }
  }
}
</script>

查阅资料才发现，因为table大数据是有多条数据的，如果你只通过一个变量来控制所有el-popover，这个是有问题的。应该是每行数据都有一个变量来控制el-popover。

改进后的代码：(通过scope.row.status来设置)

      <template slot-scope="scope">
        <el-popover
          v-model="scope.row.status"
          placement="top-start"
          width="200"
          trigger="click"
        >
          <el-button @click="scope.row.status = false">hide</el-button>
          <el-button slot="reference">show</el-button>
        </el-popover>
      </template>

另外，要注意el-table-column不能设置fixed，设置了fixed也会导致el-popover无效。