From f2c8563d7f3bcc3131524214456464a512e2624a Mon Sep 17 00:00:00 2001 From: wangqi <magical1908@outlook.com> Date: 星期一, 15 三月 2021 11:51:34 +0800 Subject: [PATCH] 企业指标统计右侧 --- src/components/table/components/WasteWater.vue | 75 ++++++++++++++++++++++++++++++++++--- 1 files changed, 69 insertions(+), 6 deletions(-) diff --git a/src/components/table/components/WasteWater.vue b/src/components/table/components/WasteWater.vue index a196886..346934f 100644 --- a/src/components/table/components/WasteWater.vue +++ b/src/components/table/components/WasteWater.vue @@ -5,16 +5,29 @@ <el-table class="tableBox" :data="tableData" - :header-cell-style="tableHeaderColor" :cell-style="rowClass" + :header-cell-style="tableHeaderColor" > <el-table-column width="30px" label="" > - <template> - <i class="el-icon-caret-right"></i> - <span style="margin-left: 10px"></span> + <template > + <el-popover :value= "show" + placement="bottom" + width="200" + trigger="click" + popper-class="popovers" + > + <ChemicalWastewater @isshow= "show=false"></ChemicalWastewater> + <i class="el-icon-caret-right" slot="reference" v-if="!isShowIcon" ></i> + <i class="el-icon-caret-bottom" slot="reference" v-else-if="isShowIcon"></i> +<!-- <i class="el-icon-caret-bottom" v-else-if="isShowIcon&&scope.row.index===1"></i>--> +<!-- <i v-if="isShowIcon" class="el-icon-caret-bottom" slot="reference" @click="isbtn"></i>--> +<!-- <i v-else class="el-icon-caret-right" slot="reference" @click="isbtn"></i>--> + </el-popover> +<!-- <i class="el-icon-caret-right" v-if="!isShowIcon"></i>--> +<!-- <i class="el-icon-caret-bottom" v-else-if="isShowIcon&&scope.row.index===1"></i>--> </template> </el-table-column> <el-table-column @@ -26,7 +39,12 @@ prop="UserName" label="浼佷笟鍚嶇О" width="120px"> - </el-table-column> + <template slot-scope="scope"> + <div v-if="scope.row.UserName==='闆嗗洟鍚嶇О'" style="color: #00ffff">{{scope.row.UserName}}</div> + <div v-else-if="scope.row.UserName==='澶╂触鐭冲寲'" style="color: #00ffff">{{scope.row.UserName}}</div> + <div v-else >{{scope.row.UserName}}</div> + </template> + </el-table-column>v- <el-table-column prop="WasteWaters" label="澶栨帓搴熸按閲忥紙m鲁锛�" @@ -61,6 +79,20 @@ prop="normal" label="姝e父" width="60px"> + <template slot-scope="{row,$index}"> + <u v-if="$index!=2" >{{row.normal}}</u> + <el-popover v-else + placement="bottom-end" + width="200" + trigger="click" + > + <ChemicalWastewater></ChemicalWastewater> + <u slot="reference" style="color: #00ffff">{{row.normal}}</u> + <!-- <i class="el-icon-caret-bottom" v-else-if="isShowIcon&&scope.row.index===1"></i>--> + <!-- <i v-if="isShowIcon" class="el-icon-caret-bottom" slot="reference" @click="isbtn"></i>--> + <!-- <i v-else class="el-icon-caret-right" slot="reference" @click="isbtn"></i>--> + </el-popover> + </template> </el-table-column> <el-table-column prop="overProof" @@ -84,16 +116,23 @@ </el-table-column> </el-table-column> </el-table> +<!-- <ChemicalWastewater v-show="isShowIcon"></ChemicalWastewater>--> <!-- </el-col>--> <!-- </el-row>--> </div> </template> <script> +import ChemicalWastewater from './componented/ChemicalWastewater' export default { name: 'WasteWater', + components: { + ChemicalWastewater + }, data () { return { + show: false, + isShowIcon: false, tableData: [{ UserName: '闆嗗洟鍚嶇О', WasteWaters: '', @@ -152,11 +191,35 @@ // 琛ㄥご鏍峰紡璁剧疆 rowClass () { return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px' + }, + // cellClick (row, column, cell, event) { + // console.log(row.index) + // if (row.index === 1) { + // this.isShowIcon = !this.isShowIcon + // } + // // console.log(column) + // // console.log(cell) + // // console.log(event) + // }, + // isbtn () { + // this.isShowIcon = !this.isShowIcon + // // this.isShowIcon = !this.isShowIcon + // // console.log(1) + // }, + tableCellClassName ({ row, column, rowIndex, columnIndex }) { + row.index = rowIndex + column.index = columnIndex } } } </script> -<style scoped> +<style > +.popovers{ + width: auto !important; +} +.popovers.el-popover{ +padding:0; +} </style> -- Gitblit v1.8.0