Element UI - Vue 常用的小技巧

1、关于在el-table中的el-button，触发点击事件时，执行confirm方法，无论点击确认还是取消，原来的button未取消聚焦的问题，解决方案如下代码。

<el-button
  size="mini"
  type="success"
  plain
  circle
  @click="startTask(scope.row, $event)"
  icon="el-icon-caret-right"
>
</el-button>

startTask(row, evt) {
  this.$confirm("是否确认此操作？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
  .then(() => {
    // 业务逻辑代码...

    // 取消聚焦
    let target = evt.target;
    if (target.nodeName === "I") {// 判断button标签里面的标签是否为i标签，注意element.nodeName返回的是大写字母
      target = evt.target.parentNode;
    }
    target.blur();
  })
  .catch(() => {
    this.$message({ type: "info", message: "已取消", duration: 1000 });

    // 取消聚焦
    let target = evt.target;
    if (target.nodeName === "I") {// 判断button标签里面的标签是否为i标签，注意element.nodeName返回的是大写字母
      target = evt.target.parentNode;
    }
    target.blur();
  });
}