页面修改

zhangxiaoxu123

2022-09-13 08b5ddfa9a0a2ed52bd7d7b98ca16ef4dcc610a6

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

@@ -253,15 +253,20 @@
        </tbody>
      </table>-->
      <el-table
        :max-height="tableHeight"
        :data="tableData"
        :span-method="objectSpanMethod"
        :cell-style="cellClass"
        border>
        <el-table-column
          align="center"
          type="index">
          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">
@@ -298,50 +303,59 @@
</template>

<script>
  import nowSize from "../../../../libs/nowSize";
  import {getGraduateTable} from '@/api/jiuyeAndChuangye'
    export default {
        name: "biyeshengStatistics",
        data() {
            return {
                tableData: [{
                    xiangmu: '本市高校',
                    year: '2333',
                    mergeRowIndex: 1,
                },{
                    xiangmu: '其中：本科毕业生',
                    year: '2333',
                    mergeRowIndex: 1,
                },{
                    xiangmu: '专科毕业生',
                    year: '2333',
                    mergeRowIndex: 1,
                },{
                    xiangmu: '全省高校',
                    year: '2333',
                    mergeRowIndex: 2,
                },{
                    xiangmu: '其中：本科毕业生',
                    year: '2333',
                    mergeRowIndex: 2,
                },{
                    xiangmu: '专科毕业生',
                    year: '2333',
                    mergeRowIndex: 2,
                },{
                    xiangmu: '全省高校本市生源',
                    year: '2333',
                    mergeRowIndex: 3
                }],
                tableData: [],
                heardArry: [],
                rowIndexArr: []//存储合并单元格的开始位置
                rowIndexArr: [],//存储合并单元格的开始位置
                tableHeight: window.innerHeight - nowSize(230)
            }
        },
        mounted() {
          this.getGraduateTable()
        },
        methods: {
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {

            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 => {
@@ -355,40 +369,55 @@
                            this.heardArry = []
                        }
                        result.forEach((item,index) => {
                            item.typeList && item.typeList.forEach((e,i) => {
                                console.log('e------------e',e.name)
                                console.log(rows[0],'0000000000000000000000000')
                            head.push(item.year)
                            item.dataList.forEach((e,i) => {
                                if(!rows[i]) {
                                    console.log(rows[i],'rows[index]------rows[index]')
                                    console.log('e------------e----2',e.name)
                                    console.log('index------------index----index',index)
                                   rows[i] = {"项目" : e.name}
                                    console.log(rows[i],'rows[index]------------1')
                                    rows[i] = { '项目' : e.name}
                                }

                                e.dataList && e.dataList.forEach((data,k) => {
                                    if(index == 0 && i == 0) {
                                        head.push(data.year)
                                        console.log(head,'head-----=============head')
                                    }
                                    rows[i][data.year] = data.val
                                    console.log(rows[i][data.year],'rows---------333333333')
                                })
                                rows[i][item.year] = e.val
                                rows[i]['mark'] = e.mark
                            })

                        })
                        this.tableData = rows
                        this.heardArry = head
                        console.log('this.tableData----this.tableData-----',this.tableData)
                        this.getData()
                    }
                })
                // let res = this.tableData
                // res.reduce((prev, cur, index) => {
                //     console.log('prev',prev)
                //     console.log('cur',cur)
                //     console.log('index',index)
                //     return cur.mergeRowIndex
                // },0)

            },
            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>
@@ -429,6 +458,27 @@
      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>

@@ -437,7 +487,6 @@
.biyeshengStatistics-wrap{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .biyeshengStatistics-table{
    width: 100%;
    border: 1Px solid $color-grey; /*no*/