sgxt_web/src/views/home/model/bkcz.vue

<template>
  <div class="comom-title">
    <div class="title">
      <span class="mr12 pointer nowrap" :style="{fontSize:activeIndex == idx ? '22px':'18px'} " v-for="(it,idx) in btns" :key="idx" @click="activeIndex = idx">{{ it }}</span>
    </div>
  </div>
  <div class="comom-cnt" id="qcbk">
    <MyTable @changePage="changePage" customClass="zdy_bkcz_table" :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" >
        <template #tp="{row}">
            <img width="30" src="@/assets/images/icon100.png" alt="">
        </template>
        <template #czzt="{row}">
            <span style="color:#FDBC3A">{{ row.czzt }}</span>
        </template>
    </MyTable>
  </div>
</template>
  
<script setup>
import MyTable from "@/components/aboutTable/DarkTable.vue";
import { reactive, ref,onMounted } from "vue";
const btns = reactive(["全域布控处置重点人员", "全域布控处置重点群体"]);
const activeIndex = ref(0);
const pageData = reactive({
  tableData: [
    {
      tp: "https://example.com/photo1.jpg",
      xm: "张三",
      xb: "男",
      sfzh: "330102199001011234",
      gkdw: "城东派出所",
      hdsj: "2023-12-25 14:30",
      sfdz: "杭州市上城区平海路123号",
      czzt: "已处置"
    },
    {
      tp: "https://example.com/photo2.jpg",
      xm: "李四",
      xb: "女",
      sfzh: "330102199203034567",
      gkdw: "城西派出所",
      hdsj: "2023-12-25 16:45",
      sfdz: "杭州市西湖区文三路456号",
      czzt: "待处置"
    },
    {
      tp: "https://example.com/photo3.jpg",
      xm: "王五",
      xb: "男",
      sfzh: "330102199505057890",
      gkdw: "城北派出所",
      hdsj: "2023-12-25 09:15",
      sfdz: "杭州市拱墅区莫干山路789号",
      czzt: "处置中"
    },
    {
      tp: "https://example.com/photo3.jpg",
      xm: "王五",
      xb: "男",
      sfzh: "330102199505057890",
      gkdw: "城北派出所",
      hdsj: "2023-12-25 09:15",
      sfdz: "杭州市拱墅区莫干山路789号",
      czzt: "处置中"
    },
  ],
  keyCount: 0,
  tableConfiger: {
    loading: false,
    rowHieght: 61,
    haveControls: false,
    showSelectType: "null",
    showIndex: false,
    stripe:true
  },
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageNum: 1
  }, //分页
  tableColumn: [
    { label: "照片", prop: "tp", showSolt: true },
    { label: "姓名", prop: "xm", showOverflowTooltip: true },
    { label: "性别", prop: "xb" ,showOverflowTooltip: true},
    { label: "身份证号码", prop: "sfzh",showOverflowTooltip: true },
    { label: "管控单位", prop: "gkdw" ,showOverflowTooltip: true},
    { label: "活动时间", prop: "hdsj" ,showOverflowTooltip: true},
    { label: "活动发生地址", prop: "sfdz" ,showOverflowTooltip: true},
    { label: "处置状态", prop: "czzt",showOverflowTooltip: true,showSolt: true  },
  ]
});

onMounted(() => {
  tabHeightFn();
});

const changePage = () => {
  console.log('触底加载==========');
};

const tabHeightFn = () => {
  pageData.tableHeight =  document.getElementById('qcbk').offsetHeight - 12;
    window.onresize = function () {
      tabHeightFn();
    };
};

</script>
  
  
<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
::v-deeep .comom-title{
  background: url("~@/assets/images/bg18.png") no-repeat center center;
  background-size: 100% 100%;
}
::v-deeep .comom-cnt{
  background: url("~@/assets/images/bg18.png") no-repeat center center;
  background-size: 100% 100%;
}

::v-deep .el-table td.el-table__cell{
  color: #ffffff;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
    background: rgba(0,61,130,0.75);
}
</style>
<style lang="scss">
.zdy_bkcz_table td.el-table__cell {
    color: #ffffff !important;
}
.zdy_bkcz_table th.el-table__cell {
    color: #ffffff !important;
    font-size: 15px;
}
</style>