tabs切换组件

wangqi

2021-03-15 3472e776001899505d7dd540a021d07be9c54cd5

 src/components/table/components/SolidWaste.vue

@@ -5,6 +5,7 @@
               :data="tableData"
               :header-cell-style="tableHeaderColor"
               :cell-style="rowClass"
               @cell-click="handle"
       >
           <el-table-column
                   width="30px"
@@ -24,11 +25,11 @@
                   prop="UserName"
                   label="企业名称"
                   width="120px">
           </el-table-column>
           <el-table-column
                   prop="WasteWaters"
                   label="工业外排废水量（m³）"
                   width="200px">
             <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>
           <el-table-column label="产生量 （吨）">
               <el-table-column
@@ -47,6 +48,18 @@
                       prop="normal"
                       label="正常"
                       width="100px">
                 <template slot-scope="{row,$index}">
                   <u v-if="$index!=1" >{{row.normal}}</u>
                   <el-popover v-else
                               placement="bottom-end"
                               width="200"
                               trigger="click"
                               title="监测点排放明细"
                   >
                     <ChemicalWastewater></ChemicalWastewater>
                     <u slot="reference" style="color: #00ffff">{{row.normal}}</u>
                   </el-popover>
                 </template>
               </el-table-column>
               <el-table-column
                       prop="warning"
@@ -59,17 +72,20 @@
</template>

<script>
import ChemicalWastewater from '@components/table/components/componented/ChemicalWastewater'
export default {
  name: 'SolidWaste',
  components: {
    ChemicalWastewater
  },
  data () {
    return {
      tableData: [{
        UserName: '集团名称',
        WasteWaters: '',
        AddOutPut: '',
        MonthOutPut: '',
        normal: '',
        warning: ''
        AddOutPut: '580',
        MonthOutPut: '250',
        normal: '10',
        warning: '9'
      }, {
        UserName: '天津石化',
        WasteWaters: '116.6',
@@ -100,6 +116,10 @@
    // 表头样式设置
    rowClass  () {
      return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
    },
    // 获取点击的表格
    handle (row, column, event, cell) {
      console.log(row.UserName)
    }
  }
}