element table type="expand" 设置成按钮展开，并且设置背景色

          <el-table
            ref="cargoTable"
            :data="cargoTransList"
            v-show="shipIndex==2"
            :header-cell-style="{background:'#F4F5F6',color:'#131D34',padding: '8px 0'}"
          >
   
            <el-table-column label="操作" width="150" align="center">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  icon="el-icon-phone"
                  plain
                  @click="toogleExpandCargo(scope.row)"
                >联系货主</el-button>
              </template>
            </el-table-column>
            <el-table-column type="expand" width="1">
              <template slot-scope="scope">
                <div>
                  <div>
                    <span
                      class="fr btn-font font-bold"
                      style="color:#2C72FC"
                    >{{scope.row.contactTelNo||'暂无'}}-{{scope.row.contactName}}</span>
                  </div>
                  <div class="contect-font" style="clear:both">
                    <span class="fr xs-sp-t" style="color:#2F3033">备注：{{ scope.row.remark||'暂无' }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>

上面主要要注意el-table ref的设置

methods:{
    toogleExpandCargo(row) {
      let $table = this.$refs.cargoTable;
      this.cargoTransList.map(item => {
        if (row.id != item.id) {
          $table.toggleRowExpansion(item, false);
        }
      });
      $table.toggleRowExpansion(row);
    },
}

还有就是设置隐藏列的背景色

.el-table >>> .el-table__expanded-cell[class*="cell"] {
  background: #f4f5f6;
}