点击图标箭头，展开图表

wangqi

2021-03-19 043a44a6b4d61796eafdecc02a13d47dd7137888

点击图标箭头，展开图表

 src/components/table/components/WasteWater.vue

@@ -21,8 +21,8 @@
                             popper-class="popovers"
                        >
                   <ChemicalWastewater v-show="$index ===1"></ChemicalWastewater>
                   <i class="el-icon-caret-right"  slot="reference" v-if="!isShowIcon" @click="doIcon($index)"></i>
                   <i class="el-icon-caret-bottom"  slot="reference" v-else @click="doIcon($index)"></i>
                   <i class="el-icon-caret-right" :class="{active: isActive === $index}" slot="reference" @click="doIcon($index)"></i>
<!--                   <i class="el-icon-caret-bottom"   slot="reference" v-else @click="doIcon($index)"></i>-->
                 </el-popover>
                   </template>
               </el-table-column>
@@ -146,6 +146,7 @@
  },
  data () {
    return {
      isActive: '',
      isShowIcon: false,
      tableData: [{
        UserName: '集团名称',
@@ -211,11 +212,17 @@
      console.log(row.UserName)
    },
    doIcon (index) {
      if (index === 1) {
        this.isShowIcon = !this.isShowIcon
      } else {
      if (index !== 1) {
        this.isShowIcon = false
        this.isActive = ''
        return
      }
      this.isShowIcon = !this.isShowIcon
      if (index === this.isActive) {
        this.isActive = ''
        return
      }
      this.isActive = index
    }
  }
}
@@ -229,5 +236,9 @@
.popovers.el-popover{
padding:0;
}
.active {
  /*color: red;*/
  transform:rotate(90deg);
}

</style>