el-table中el-table-column下的操作切换class样式

 需求:用操作按钮太多;设计这边想如果按钮大于3个就把它放在更多中;如果点击更多;就向左出现;再点击就隐藏,如果当前row为展开又点其它row的更多 ;就把这个展开的关闭箭头恢复成向左显示

代码:

 el-table结合el-popover弹出框

html:

   <el-popover
                  placement="left-end"
                  width="200"
                  trigger="click"
                  popper-class="xk-flex-popover"
                  :offset="-15"
                  :visible-arrow="false"
                  @show="handleShow(scope.$index)"
                  @hide="handleHide(scope.$index)"
                >
                  <!-- <transition name="slide-fade">  v-if="scope.$index == isRotateIndex"-->
                  <div>
                    <el-button
                      type="text"
                      size="mini"
                      @click="handleEditReport(scope.row)"
                      >报告日志</el-button
                    >
                    <el-button
                      type="text"
                      size="mini"
                      @click="handleEditReport(scope.row)"
                      >检测详情</el-button
                    >
                    <el-button
                      type="text"
                      size="mini"
                      @click="handleEditReport(scope.row)"
                      >发起复测</el-button
                    >
                  </div>
                  <!-- </transition> -->
                  <el-button slot="reference" type="text">
                    <i
                      :class="[
                        'el-icon-arrow-left',
                        isRotateIndex === scope.$index && isRotateShow
                          ? 'xk-rotate-170'
                          : 'xk-rotate-0'
                      ]"
                    ></i>
                    更多</el-button
                  >
                </el-popover>

css:

.xk-rotate-170 {
  transform: rotate(-180deg);
  transition: all .3s;

}


.xk-rotate-0 {
  // animation: rotate0 0.3s;
  transform: rotate(0deg);
  transition: all .3s;
}

js:

  data () {
    return {
      isRotateShow: false,
      isRotateIndex: null,
      preRotateIndex: null
    }
  },
methods: {
    // 处理table中操作栏下的更多旋转方法
    // 更多关闭
    handleHide (i) {
      if (this.preRotateIndex !== i) {
        // 如果上一个index和当前index不相等就让上一个关闭当前这个展开
        this.isRotateShow = true
        this.isRotateIndex = this.preRotateIndex
        return
      }
      // 如果上一个和当前index不相等就还原
      this.isRotateIndex = null
      this.isRotateShow = false
    },
    // 更多展开
    handleShow (i) {
      this.isRotateShow = true
      this.isRotateIndex = i
      this.preRotateIndex = i
    }
  }

 

 

效果如下: