细节样式

zhangxiaoxu123456

2022-04-27 b55d1c67769dcc8d90eed2bb4f8a7dfd51e7303a

 src/pages/components/juminYanglaoBaoxian/baoxianForm.vue

@@ -1,78 +1,75 @@
<template>
  <div class="baoxianForm-wrap">
  <div class="baoxianForm-wrap" :style="{paddingTop : paddingTop + 'rem'}">
    <el-table
      :cell-style="handleCellStyle"
      :max-height="tableHeight"
      border
      style="width: 100%"
      :data="tableData">
      <el-table-column
        width="200"
        align="center"
        prop="name"
        prop="areaName"
        label="县（市、区）">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="january"
        label="1月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        label="1月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="february"
        label="2月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="march"
        label="3月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="april"
        label="4月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="may"
        label="5月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="june"
        label="6月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="july"
        label="7月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="august"
        label="8月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="september"
        label="9月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="october"
        label="10月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="november"
        label="11月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="december"
        label="12月">
      </el-table-column>
    </el-table>
@@ -80,20 +77,43 @@
</template>

<script>
    import {getInsuranceTable} from '@/api/shehuiBaozhang'
    import nowSize from "../../../libs/nowSize";
    export default {
        name: "baoxianForm",
        props: {
            paddingTop: {
                type: Number,
                default: 0.078125
            },
            typeData: {
                type: String,
                default: '3'
            }
        },
        computed: {
        },
        data() {
            return {
                tableData:[{
                    name: '全市',
                    month: '23233'
                },{
                    name: '市本级',
                    month: '23233'
                },{
                    name: '长安区',
                    month: '23233'
                }]
                tableData:[],
                tableHeight: window.innerHeight - nowSize(230)
            }
        },
        mounted() {
            this.getInsuranceTable()
        },
        methods: {
            getInsuranceTable() {
                getInsuranceTable({type: this.typeData}).then(res => {
                    if(res.code == 1000) {
                       this.tableData = res.list
                    }
                })
            },
            handleCellStyle({rowIndex, columnIndex}) {
                if(columnIndex == 0) {
                    return { background:'#51D2FF' }
                }
            }
        }
    }
@@ -103,8 +123,8 @@
  @import "../../../assets/css/base";
  .baoxianForm-wrap{
    width: 100%;
    height: calc(100% - 0.234375rem  /* 60/256 */);
    padding-top: 0.234375rem  /* 60/256 */;
    height: 100%;
    box-sizing: border-box;
    .el-table th.el-table__cell{
      background-color:$color-blue;
    }