使用element-ui中table expand展开行通过自定义按钮控制显示隐藏，以及修改expand上下箭头的图标

一、修改expand上下箭头的图标

  // 将el-table的展开图标替换为其他图标
  .el-table__expand-icon {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  .el-table__expand-icon .el-icon-arrow-right:before {
    content: "\e6d9";
    border: 1px solid #ccc;
    padding: 2px;
  }

  .el-table__expand-icon--expanded .el-icon-arrow-right:before {
    content: "\e6d8";
  }

实现的效果图:

二、table expand展开行通过自定义按钮控制显示隐藏

1、去除小箭头，隐藏小箭头列 2、点击其他按钮控制展开行的显示隐藏

  <el-button
     type="danger"
     icon="el-icon-edit"
     @click="toogleExpand(scope.row)"
     circle
  ></el-button>

 methods: {
   toogleExpand(row) {
      let $table = this.$refs.table;
      $table.toggleRowExpansion(row);
 }

实现的效果图：