echarts添加显示隐藏按钮

zhangxiaoxu123

2022-09-14 77536cfa95b1e3c5e60f94dce3a53aa2e93f121a

 src/pages/show/jiuyeAndChuangye/jiuyeChildren/biyeshengStatistics.vue

@@ -1,6 +1,6 @@
<template>
    <div class="biyeshengStatistics-wrap">
      <table class="biyeshengStatistics-table">
      <!--<table class="biyeshengStatistics-table">
        <thead>
          <tr>
            <th colspan="1">序号</th>
@@ -251,22 +251,242 @@
            <td colspan="2">45682</td>
          </tr>
        </tbody>
      </table>
      </table>-->
      <el-table
        :max-height="tableHeight"
        :data="tableData"
        :span-method="objectSpanMethod"
        :cell-style="cellClass"
        border>
        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="110">
        </el-table-column>
        <template v-for="(item,index) in heardArry">
          <el-table-column
            :key="index"
            align="center"
            :prop="item"
            :label="item">
          </el-table-column>
        </template>
        <!--<el-table-column
          align="center"
          prop="xiangmu"
          label="项目"
          width="300">
        </el-table-column>
        <el-table-column
          align="center"
          prop="year"
          label="2017年">
        </el-table-column>
        <el-table-column
          align="center"
          prop="year"
          label="2018年">
        </el-table-column>
        <el-table-column
          align="center"
          prop="year"
          label="2019年">
        </el-table-column>
        <el-table-column
          align="center"
          prop="year"
          label="2020年">
        </el-table-column>-->
      </el-table>
    </div>
</template>

<script>
  import nowSize from "../../../../libs/nowSize";
  import {getGraduateTable} from '@/api/jiuyeAndChuangye'
    export default {
        name: "biyeshengStatistics"
        name: "biyeshengStatistics",
        data() {
            return {
                tableData: [],
                heardArry: [],
                rowIndexArr: [],//存储合并单元格的开始位置
                tableHeight: window.innerHeight - nowSize(230)
            }
        },
        mounted() {
          this.getGraduateTable()
        },
        methods: {
            objectSpanMethod({rowIndex, columnIndex}) {  //合并单元格
                if(columnIndex == 0) {
                    if(this.rowIndexArr.includes(rowIndex)) {
                        console.log(rowIndex,'------index')
                        return {
                            rowspan:  this.rowIndexArr[this.rowIndexArr.indexOf(rowIndex) + 1] - rowIndex,
                            colspan: 1,
                        }
                    }else {
                        return {
                            rowspan: 0,
                            colspan: 0
                        }
                    }
                }
            },
            cellClass({ row, column, rowIndex, columnIndex }) {  //修改某个单元格样式
                if(columnIndex == 1) {
                    if(this.rowIndexArr.includes(rowIndex)) {
                        return {
                            textAlign: 'left'
                        }
                    }
                }
                if(columnIndex == 0) {
                    return { background:'#51D2FF' }
                }
            },
            getData() {
              let res = this.tableData
              res.reduce((prev, cur, curIndex) => {
                 if(prev == 0 || prev != cur.mark) {
                     this.rowIndexArr.push(curIndex)
                 }
                 return cur.mark
              },0)
              this.rowIndexArr.push(res.length)
            },
            getGraduateTable() {
                getGraduateTable().then(res => {
                    if(res.code == 1000) {
                        let result = res.list
                        let head = []
                        let rows = []
                        head.push('项目')
                        if(!result) {
                            this.tableData = []
                            this.heardArry = []
                        }
                        result.forEach((item,index) => {
                            head.push(item.year)
                            item.dataList.forEach((e,i) => {
                                if(!rows[i]) {
                                    rows[i] = { '项目' : e.name}
                                }
                                rows[i][item.year] = e.val
                                rows[i]['mark'] = e.mark
                            })

                        })
                        this.tableData = rows
                        this.heardArry = head
                        this.getData()
                    }
                })

            },
            getMaxLength (arr) {
                return arr.reduce((acc, item) => {
                    if (item) {
                        const calcLen = this.getTextWidth(item)
                        if (acc < calcLen) {
                            acc = calcLen
                        }
                    }
                    return acc
                }, 0)
            },
            /*动态获取表格宽度*/
            getTextWidth (str) {
                let width = 0
                const html = document.createElement('span')
                html.innerText = str
                html.className = 'getTextWidth'
                document.querySelector('body').appendChild(html)
                width = document.querySelector('.getTextWidth').offsetWidth
                console.log('width',width)
                document.querySelector('.getTextWidth').remove()
                return width
            },
            getHeight() {
                this.tableHeight = window.innerHeight - nowSize(230)
            }
        },
        created() {
            window.addEventListener('resize', this.getHeight)
        },
        destroyed() {
            window.addEventListener('resize', this.getHeight)
        }
    }
</script>

<style lang="scss">
  @import "../../../../assets/css/base";
  .biyeshengStatistics-wrap{
    .el-table tr{
      background-color: #CEF2FF;
    }
    .el-table th.el-table__cell{
      background-color: #51D2FF;
    }
    .el-table__fixed, .el-table__fixed-right,.el-table__fixed-right::before, .el-table__fixed::before{
      background-color: #51D2FF;
    }
    .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
      background-color: #A8E9FF;
    }
    .el-table thead{
      color: #111111;
    }
    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
      border-bottom: 1Px solid #8E8E8E;
    }
    .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
      border-right: 1Px solid #8E8E8E;
    }
    .el-table .el-table__cell{
      padding: 0.0859375rem  /* 22/256 */ 0;
    }
    .el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .el-table__body tr.hover-row>td.el-table__cell{
      background: transparent;
    }
    .el-table .cell{
      font-size: $fontSize-28;
      color: $color-darkGrey;
      font-weight: 300;
      line-height: 1;
    }
    /*.el-table th {*/
    /*  padding: 0;*/
    /*  white-space: nowrap;*/
    /*  min-width: fit-content;*/
    /*}*/

    /*.el-table td {*/
    /*  padding: 1px;*/
    /*  white-space: nowrap;*/
    /*  width: fit-content;*/
    /*}*/

    /*!** 修改el-card默认paddingL:20px-内边距 **!*/
    /*.el-card__body {*/
    /*  padding: 10px;*/
    /*}*/

    /*.el-table .cell {*/
    /*  white-space: nowrap;*/
    /*  width: fit-content;*/
    /*}*/
  }
</style>

<style lang="scss" scoped>
  @import "../../../../assets/css/base";
.biyeshengStatistics-wrap{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .biyeshengStatistics-table{
    width: 100%;
    border: 1Px solid $color-grey; /*no*/