jin_ji_hu/src/views/enterpriselibrary/enterInfo/components/tabThree/index.vue

<template>
  <div class="money-schedule" id="L-contacts-main">
    <div class="schedule-title" id="L-header-list">【项目清单】</div>
    <div class="schedule-timeline">
      <section>
        <el-table v-loading="loading" border class="tabTwo-table" :data="tableData" :row-class-name="tableRowClassName" :max-height="tabHeader">
          <el-table-column type="index" width="55" label="序号"/>
          <el-table-column label="项目名称" prop="projectName" />
          <el-table-column label="操作" prop="userId" class-name="table-operation">
            <template slot-scope="scope">
              <span class="look-info" @click="goInfo(scope.row)">查看详情</span>
            </template>
          </el-table-column>
        </el-table>
        <my-pagination 
          id="L-pagination-list"
          :total="total"
          :page="pagination.current"
          :limit="pagination.size"
          @pagination="getPagination"
          :current-page.sync="pagination.current" 
        ></my-pagination>
      </section>
    </div>
  </div>
</template>
<script>
import myPagination from "@/views/components/Pagination/index.vue"
import { jProject } from "@/api/jin_ji_hu/project/index"
export default {
  components:{myPagination},
  name:"tabThree",
  props:{
    creditCode:{
      type:String,
      default:""
    }
  },
  data() {
    return {
      loading: false,
      tableData: [],
      tabHeader: null,
      total:0,
      pagination: {
        current:1,
        size:10,
        creditCode: this.creditCode,
      },
    }
  },
  mounted() {
    this.cancalDebounce();
    window.addEventListener('resize', this.cancalDebounce);
    this.getList()
  },
  destroyed() {
    window.removeEventListener('resize', this.cancalDebounce);
  },
  methods:{
    // 列表获取
    getList(){
      this.loading = true;
      jProject(this.pagination).then(res=>{
        this.loading = false;
        this.total = res.data.total;
        this.tableData = res.data.records;
      })
    },
    // 页码更改
    getPagination(pages) {
      this.pagination.current = pages.page;
      this.pagination.size = pages.limit;
      this.getList();
    },
    goInfo(row){
      this.$router.push({
        name: 'Project',
        params: { projectName: row.projectName }
      })
    },
    // 修改table背景色
    tableRowClassName({row, rowIndex}){
      if (rowIndex % 2 !== 0) {
        return 'evenNumber-row';
      }
      return '';
    },
    // 屏幕尺寸变化
    cancalDebounce(){
      const element = document.getElementById('L-contacts-main'); // 通过元素的 ID 获取元素
      const header = document.getElementById('L-header-list'); // 通过元素的 ID 获取元素
      const pagination = document.getElementById('L-pagination-list'); // 通过元素的 ID 获取元素
      const elementHeight = element.offsetHeight;
      const headerHeight = header.offsetHeight;
      const paginationHeight = pagination.offsetHeight;
      this.tabHeader = elementHeight - headerHeight - paginationHeight - 100;
    }
  },
}
</script>