弹出框&表格&分页

后端返回多个表格数据
用一个表格样式渲染

            <el-dialog
              :title="dialogTitle"
              width="90%"
              :visible.sync="dialogTableVisible"
              :modal-append-to-body="false"
              :modal="true"
            >
              <el-table
                :data="gridData"
                :border="false"
                :header-cell-class-name="headClass"
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  property="stationTypeFirst"
                  width="280"
                  label="职位类别"
                  v-if="gridData[0] ? gridData[0].stationTypeFirst : ''"
                ></el-table-column>
                <el-table-column
                  property="education"
                  width="130"
                  label="学历"
                  v-if="gridData[0] ? gridData[0].education : ''"
                >
                <el-table-column
                  property="name"
                  width="150"
                  label="姓名"
                  v-if="gridData[0] ? gridData[0].name : ''"
                ></el-table-column>
                <el-table-column
                  property="age"
                  width="100"
                  label="年龄"
                  v-if="gridData[0] ? gridData[0].age : ''"
                ></el-table-column>
                <el-table-column
                  property="school"
                  label="学校"
                  v-if="gridData[0] ? gridData[0].school : ''"
                ></el-table-column>
                <el-table-column
                  property="professionalName"
                  width="280"
                  label="专业"
                  v-if="gridData[0] ? gridData[0].professionalName : ''"
                ></el-table-column>
                </el-table>
              <!-- 分页 -->
              <el-pagination
                background
                hide-on-single-page
                layout="prev, pager, next"
                :page-size="10"
                :current-page.sync="pageNo"
                :total="total"
                style="margin-top: 25px"
                @current-change="handleCurrentChange"
              >
              </el-pagination>
            </el-dialog>

  methods: {
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 1) {
        return "js-row";
      }
      return "os-row";
    },
    // 表头样式
    headClass() {
      return "head-class";
    },
    dialog(value) {
      console.log(value, "dialogValue");
      this.dialogIndex = value;
      console.log(this.dialogIndex, "dindex");
      this.dialogTableVisible = true;
      this.pageNo = 1;
      this.total = 0;
      this.gridData = [];
      this.$nextTick(() => {
        if (this.dialogIndex == 1) {
          this.getSelectCompanyCount();
          this.dialogTitle = "注册企业";
        } else if (this.dialogIndex == 2) {
          this.getSelectActiveCompanyCount();
          this.dialogTitle = "活跃企业";
        } else if (this.dialogIndex == 3) {
          this.getSelectHeadCount();
          this.dialogTitle = "在招岗位";
        } else if (this.dialogIndex == 4) {
          this.getSelectJobResumeCount();
          this.dialogTitle = "求职人数";
        } else if (this.dialogIndex == 5) {
          this.getSelectJobResumeIntoCount();
          this.dialogTitle = "实现就业";
        } else if (this.dialogIndex == 6) {
          this.getSelectFairCount();
          this.dialogTitle = "招聘会";
        }
      });
    },
    handleCurrentChange(e) {
      console.log(e, "选中页数");
      this.pageNo = e;
      this.gridData = [];
      this.$nextTick(() => {
        if (this.dialogIndex == 1) {
          this.getSelectCompanyCount();
        } else if (this.dialogIndex == 2) {
          this.getSelectActiveCompanyCount();
        } else if (this.dialogIndex == 3) {
          this.getSelectHeadCount();
        } else if (this.dialogIndex == 4) {
          this.getSelectJobResumeCount();
        } else if (this.dialogIndex == 5) {
          this.getSelectJobResumeIntoCount();
        } else if (this.dialogIndex == 6) {
          this.getSelectFairCount();
        }
      });
    },
    getData() {
      data({
        pageNo: this.pageNo,
        pageSize: 10,
      }).then((res) => {
        console.log(this.pageNo, "resNo");
        this.gridData = res.result.records;
        this.total = res.result.total;
      });
    },

<style>
.el-dialog {
  background: #1e7bdc;
  border: 1px solid #080c22;
  border-radius: 10px;
}
/* 弹出框标题 */
.el-dialog__title {
  color: #fff;
}
/* 关闭按钮 */
.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
/* 表格头 */
.head-class {
  background: #175190 !important;
  font-size: 25px;
  font-weight: 500;
  color: #ffffff;
}
/* 偶数行样式 */
.os-row {
  background: rgba(10, 38, 98, 0.1) !important;
  font-size: 22px;
}
.js-row {
  background: rgba(24, 65, 110, 0.3) !important;
  font-size: 22px;
}
/*表格鼠标悬停的样式（背景颜色）*/
.el-table tbody tr:hover > td {
  background-color: rgba(255, 255, 255, 0) !important;
}
</style>

remark：
打包后element的样式无法实现，在本地是可以的，需要加上！important