细节样式

zhangxiaoxu123456

2022-04-27 b55d1c67769dcc8d90eed2bb4f8a7dfd51e7303a

 src/pages/components/qiyezhigongShebao/zhigongShebao.vue

@@ -1,33 +1,44 @@
<template>
  <div class="zhigongShebao-wrap">
    <el-table
      :cell-style="handleCellStyle"
      :height="tableHeight"
      border
      :data="tableData"
      :header-cell-style="handleheader"
      :default-sort = "{prop: 'name', order: 'descending'}"
      style="width: 100%">
      <el-table-column
        prop="shiqu"
        prop="area"
        label="县（市、区）"
        align="center"
        width="250">
      </el-table-column>
      <el-table-column
        sortable
        prop="name"
        label="企业职工养老保险参保人数"
        :sort-method="(a,b) => {return a.insuredNums - b.insuredNums}"
        prop="insuredNums"
        :label="dataType"
        align="center">
      </el-table-column>
      <el-table-column
        sortable
        prop="address"
        :sort-method="(a,b) => {return a.inJobs - b.inJobs}"
        prop="inJobs"
        label="在职职工"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        sortable
        :sort-method="(a,b) => {return a.outJobs - b.outJobs}"
        prop="outJobs"
        label="离退休"
        align="center">
      </el-table-column>
      <el-table-column
        sortable
        :sort-method="(a,b) => {return a.proportion - b.proportion}"
        prop="proportion"
        label="供养比"
        align="center">
      </el-table-column>
      <el-table-column
@@ -44,50 +55,58 @@
</template>

<script>
  import {getSecurityTable} from '@/api/shehuiBaozhang'
  import zhigongshebaoForm from "./zhigongshebaoForm";
  import nowSize from "../../../libs/nowSize";
    export default {
        name: "chengzhenXinzengJiuye",
        components: {
            zhigongshebaoForm
        },
        props: ['type','dataType'],
        data() {
            return {
                zhigongshebaoVisiable: false,  //弹框
                tableData: [{
                    shiqu:'全市',
                    date: '1',
                    name: '1',
                    address: '1'
                }, {
                    shiqu:'长安区',
                    date: '1',
                    name: '2',
                    address: '2'
                }, {
                    shiqu:'桥西区',
                    date: '3',
                    name: '3',
                    address: '4'
                }, {
                    shiqu:'新华区',
                    date: '4',
                    name: '4',
                    address: '1   '
                }]
                tableData: [],
                tableHeight: window.innerHeight - nowSize(230)
            }
        },
        mounted() {
          this.getSecurityTable()
        },
        methods: {
            getSecurityTable() {
                getSecurityTable({type: this.type}).then(res => {
                    if(res.code == 1000) {
                        this.tableData = res.list
                    }
                })
            },
            handleClick(row) {
                this.zhigongshebaoVisiable = true
                this.$nextTick(() => {
                    this.$refs.zhigongshebaoForm.init()
                    this.$refs.zhigongshebaoForm.init(this.type,row.area)
                })
            },
            handleheader(data) {
                return {
                    lineHeight: '2.5',
                }
            }
            },
            getHeight() {
                this.tableHeight = window.innerHeight - nowSize(230)
            },
            handleCellStyle({rowIndex, columnIndex}) {
                if(columnIndex == 0) {
                    return { background:'#51D2FF' }
                }
            },
        },
        created() {
            window.addEventListener('resize', this.getHeight)
        },
        destroyed() {
            window.addEventListener('resize', this.getHeight)
        }
    }
</script>