elementUI表格el-table中处理@row-click和按钮的关系

背景

有一个使用elementUI制作的表格, 点击每行可以查看其他信息 (@row-click),
每行末尾有编辑和删除两个按钮, 可以对这一行进行操作.

问题

添加 @row-click 事件后, 编辑 和 删除 无法点击, 点击这两个按钮也会查看详细信息.

解决方法

在编辑 和 删除 这两个按钮的点击事件上加上.stop, 阻止向上冒泡.

@click.stop=" "

例如:

            <el-button
              type="button"
              size="mini"
              @click.stop="deleteKnowledgeBase(scope.row)"
              style="
                color: #02a38e;
                border: 1px solid #02a38e;
                margin-left: 6px;
              "
              class="loginButtonColor delete_kn"
            >
              <!-- <p class="el-icon-delete"></p> -->
              删除
            </el-button>