zhangxiaoxu123456
2022-04-27 00a5d715d57b1cab9c464004c678b08fe54f0207
src/pages/show/personnelTalents/personnelTalentsChild/PersonnelTalents_GreenCard.vue
@@ -7,38 +7,38 @@
        border
        style="width: 100%" :cell-style="updataCellStyle" :span-method="mergeColumnTableCell">
        <el-table-column
          prop="nianfen"
          prop="jyear"
          label="年份">
        </el-table-column>
        <el-table-column
          label="A卡">
          <el-table-column
            prop="chikazongrenshu"
            prop="acardNums"
            label="持卡总人数 (人)">
          </el-table-column>
          <el-table-column
            prop="butiezongfafang"
            prop="asubsidy"
            label="补贴总发放 (万元)">
          </el-table-column>
          <el-table-column
            label="购房">
            <el-table-column
              prop="chikarenshu"
              prop="apurchaseNums"
              label="持卡人数 (人)">
            </el-table-column>
            <el-table-column
              prop="gourfangbutie"
              prop="apurSubsidy"
              label="购房补贴 (万元)">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="租房">
            <el-table-column
              prop="chikfarenshu"
              prop="arentNums"
              label="持卡人数 (人)">
            </el-table-column>
            <el-table-column
              prop="zufangbutie"
              prop="arentSubsidy"
              label="租房补贴 (万元)">
            </el-table-column>
          </el-table-column>
@@ -46,133 +46,95 @@
        <el-table-column
          label="B卡">
          <el-table-column
            prop="chikazongrenshu1"
            prop="bcardNums"
            label="持卡总人数 (人)">
          </el-table-column>
          <el-table-column
            prop="butiezongfafang1"
            prop="bsubsidy"
            label="补贴总发放 (万元)">
          </el-table-column>
          <el-table-column
            label="购房">
            <el-table-column
              prop="chikarenshu1"
              prop="bpurchaseNums"
              label="持卡人数 (人)">
            </el-table-column>
            <el-table-column
              prop="gourfangbutie1"
              prop="bpurSubsidy"
              label="购房补贴 (万元)">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="租房">
            <el-table-column
              prop="chikfarenshu1"
              prop="brentNums"
              label="持卡人数 (人)">
            </el-table-column>
            <el-table-column
              prop="zufangbutie1"
              prop="brentSubsidy"
              label="租房补贴 (万元)">
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="PT--Echarts"></div>
    </div>
  </div>
</template>
<script>
  import {getPersonCardTable} from '@/api/personnelTalents'
export default {
  name: "PersonnelTalents_GreenCard",
  data() {
    return {
      tableData: [
        {
          nianfen:'2021年 1——3月',
          chikazongrenshu:'——',
          butiezongfafang:'——',
          chikarenshu:'——',
          gourfangbutie:'——',
          chikfarenshu:'——',
          zufangbutie:'——',
          chikazongrenshu1:'9938',
          butiezongfafang1:'2914.8',
          chikarenshu1:'——',
          gourfangbutie1:'——',
          chikfarenshu1:'6321',
          zufangbutie1:'2914.8'
        },
        {
          nianfen:'2021年 4——6月',
          chikazongrenshu:'——',
          butiezongfafang:'——',
          chikarenshu:'——',
          gourfangbutie:'——',
          chikfarenshu:'——',
          zufangbutie:'——',
          chikazongrenshu1:'9938',
          butiezongfafang1:'9456.7',
          chikarenshu1:'754',
          gourfangbutie1:'6654.5',
          chikfarenshu1:'6072',
          zufangbutie1:'2802.2'
        },
        {
          nianfen:'2021年 7——9月',
          chikazongrenshu:'——',
          butiezongfafang:'——',
          chikarenshu:'——',
          gourfangbutie:'——',
          chikfarenshu:'——',
          zufangbutie:'——',
          chikazongrenshu1:'9938',
          butiezongfafang1:'9456.7',
          chikarenshu1:'754',
          gourfangbutie1:'6654.5',
          chikfarenshu1:'6072',
          zufangbutie1:'2802.2'
        },
        {
          nianfen:'2021年 10——12月',
          chikazongrenshu:'915',
          butiezongfafang:'72.56',
          chikarenshu:'5',
          gourfangbutie:'68',
          chikfarenshu:'3',
          zufangbutie:'4.56',
          chikazongrenshu1:'10600',
          butiezongfafang1:'9456.7',
          chikarenshu1:'754',
          gourfangbutie1:'6654.5',
          chikfarenshu1:'6072',
          zufangbutie1:'2802.2'
        }
      ]
      tableData: [],
      spanArr: [],  //spanArr用于存放每一行记录的合并数
    }
  },
  mounted() {
    this.getPersonCardTable()
  },
  methods:{
    getPersonCardTable() {
        getPersonCardTable().then(res => {
            if(res.code == 1000) {
                this.tableData = res.list
                this.rowspan()
            }
        })
    },
    // 修改单个表格样式
    updataCellStyle({ rowIndex, columnIndex}){
      if(rowIndex===0&&columnIndex===0){
      if(columnIndex===0){
        return {background:'#51D2FF'}
      }else if(rowIndex===1&&columnIndex===0){
        return{background:'#51D2FF'}
      }else if(rowIndex===2&&columnIndex===0){
        return{background:'#51D2FF'}
      }else if(rowIndex===3&&columnIndex===0){
        return{background:'#51D2FF'}
      }
    },
    rowspan() {
        let position = 0  //用于存储相同项的开始index
        this.tableData.forEach((item,index) => {
            console.log('item--',item)
            if(index === 0) {
                this.spanArr.push(1)
            }else {
                if(item.acardNums == this.tableData[index - 1].acardNums) {
                    this.spanArr[position] += 1
                    this.spanArr.push(0)
                }else {
                    position = index
                    this.spanArr.push(1)
                }
            }
        })
    },
    // 合并单元格
    mergeColumnTableCell({rowIndex,columnIndex}){
      if(columnIndex === 7){
        if(rowIndex === 0){
      if(columnIndex == 1 ||  columnIndex == 7) {
          const _row = this.spanArr[rowIndex]
          const _col = _row>0 ? 1 : 0
          return {
            rowspan:3,
            colspan:1
              rowspan: _row,
              colspan: _col
          }
        }
      }
    }
  }