From 90bd41135b97f97f284da2716cec475a7ae8d657 Mon Sep 17 00:00:00 2001 From: wangqi <magical1908@outlook.com> Date: 星期四, 25 三月 2021 11:03:53 +0800 Subject: [PATCH] 修改表格箭头 --- src/components/table/components/WasteGas.vue | 49 ++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 38 insertions(+), 11 deletions(-) diff --git a/src/components/table/components/WasteGas.vue b/src/components/table/components/WasteGas.vue index 4ebce10..0c2c839 100644 --- a/src/components/table/components/WasteGas.vue +++ b/src/components/table/components/WasteGas.vue @@ -11,10 +11,19 @@ width="30px" label="" > - <template> - <i class="el-icon-caret-right"></i> - <span style="margin-left: 10px"></span> - </template> + <template slot-scope="{row,$index}"> + <!-- <i class="el-icon-caret-right" v-if="$index ===1"></i>--> + <el-popover + placement="bottom" + trigger="click" + :disabled="!isShowIcon" + popper-class="popovers" + > + <ChemicalWastewater v-show="$index ===1"></ChemicalWastewater> + <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> <el-table-column label="搴忓彿" @@ -78,7 +87,7 @@ label="姝e父" width="60px"> <template slot-scope="{row,$index}"> - <u v-if="$index!=1" >{{row.normal}}</u> + <u v-if="$index!==1" >{{row.normal}}</u> <el-popover v-else placement="bottom-end" width="200" @@ -110,7 +119,7 @@ label="缂哄け" width="60px"> <template slot-scope="{row,$index}"> - <u v-if="$index!=1" >{{row.deficiency}}</u> + <u v-if="$index!==1" >{{row.deficiency}}</u> <el-popover v-else placement="bottom-end" width="200" @@ -128,18 +137,20 @@ </template> <script> -// import ChemicalWastewater from '@components/table/components/componented/ChemicalWastewater' +import ChemicalWastewater from '@components/table/components/componented/ChemicalWastewater' import Refinery from '@components/table/components/componented/refinery' import MissingAlarm from '@components/table/components/componented/MissingAlarm' export default { name: 'WasteGas', components: { MissingAlarm, - Refinery - // ChemicalWastewater + Refinery, + ChemicalWastewater }, data () { return { + isActive: '', + isShowIcon: false, tableData: [{ UserName: '闆嗗洟鍚嶇О', WasteWaters: '', @@ -192,7 +203,7 @@ } }, methods: { - tableHeaderColor ({ row, column, owIndex, columnIndex }) { + tableHeaderColor ({ columnIndex }) { return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px' }, // 琛ㄥご鏍峰紡璁剧疆 @@ -202,11 +213,27 @@ // 鑾峰彇鐐瑰嚮鐨勮〃鏍� handle (row, column, event, cell) { console.log(row.UserName) + }, + doIcon (index) { + if (index !== 1) { + this.isShowIcon = false + this.isActive = '' + return + } + this.isShowIcon = !this.isShowIcon + if (index === this.isActive) { + this.isActive = '' + return + } + this.isActive = index } } } </script> <style scoped> - +.active { + /*color: red;*/ + transform:rotate(90deg); +} </style> -- Gitblit v1.8.0