改变查询条件，直接切换分页到第二页，表格会变成空白怎么解决，需要转接查询条件

 

<template>
  <div>
    <!-- 导航栏 -->
    <svgHeader pageTitle="中压线路"></svgHeader>
    <div class="contentContainer">
      <!-- 查询条件 -->
      <div class="searchContainer">
        <el-form
          :model="queryParams"
          label-width="auto"
          :inline="true"
          ref="ruleForm"
        >
          <el-form-item label="所属省" prop="province">
            <el-select
              size="small"
              v-model="queryParams.province"
              @change="changeProvinces"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) in options1"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属地市" prop="city">
            <el-select
              size="small"
              v-model="queryParams.city"
              placeholder="请选择"
              @change="changeCity"
              @focus="prefectureCity"
              clearable
            >
              <el-option
                v-for="(item, index) in options2"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="运维单位" prop="organizationId">
            <el-select
              size="small"
              v-model="queryParams.organizationId"
              @change="changeOperationMaintenanceUnit"
              @focus="Company"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) in options3"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="中压线路">
            <!-- 树 -->
            <tree-select
              :checkedKeys="checkedKeys"
              size="small"
              :data="treeData"
              :nodeKey="nodeKey"
              :defaultProps="defaultProps"
              @change="getNode"
              :clearable="true"
              ref="selectTree"
              :disabled="disabled"
            />
          </el-form-item>
          <el-form-item label="运行状态" prop="state">
            <el-select
              size="small"
              v-model="queryParams.state"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in options4"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否实现监测" prop="ifOnlineMonitor">
            <el-select
              size="small"
              v-model="queryParams.ifOnlineMonitor"
              placeholder="全部"
              clearable
            >
              <el-option
                v-for="item in options5"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="btnBox">
            <el-button size="mini" @click="search" type="primary"
              >查询</el-button
            >
            <el-button size="mini" @click="reset">重置</el-button>
            <el-button size="mini" @click="leadingOut" type="primary"
              >导出</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格区域 -->
      <div class="tableContainer">
        <ShowTable
          :tableData="tableData"
          :tableColumn="tableColumn"
          :height="tableHeight"
          :pageSize="queryParams.limit"
          :page="queryParams.page"
        />
        <!-- 分页按钮 -->
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="queryParams.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
       </div>
  </div>
</template>

<script>
import { POSTExportExcel } from "@/api/http"; //导出组件
import TreeSelect from "@/components/TreeSelect"; // 下拉树组件
import { https } from "@/api/dashborad"; //接口
export default {
  name: "mediumVoltageLine",
  //引入的组件
  components: { TreeSelect },
  data() {
    return {
      url: {
        query: "/pLineInformation/selectPlineList", //查询接口
        provinces: "/bOrganization/provinceList", //省下拉列表接口
        cities: "/bOrganization/cityList", //市下拉列表接口
        operationMaintenanceUnit: "/bOrganization/countyList", //运维单位接口
        mediumVoltageLine: "/pPlatformInformation/dict", //中压线路接口
        leadingOut: "/pLineInformation/exportLine", //导出接口
      },
      checkedKeys: [],
      form: {
        line: "", //中压线路
      },
      treeData: [], //中压线路数据
      nodeKey: "id",
      // 下属单位-树形结构
      defaultProps: {
        children: "children",
        label: "fname",
      },
      total: 0, // 数据总条数
      id: "", //省id
      cityId: "", //市id
      countyId: "", //运维单位id
      options1: [],
      options2: [],
      options3: [],
      options4: [
        {
          value: "01",
          label: "运行",
        },
        {
          value: "02",
          label: "检修",
        },
        {
          value: "03",
          label: "调试",
        },
        {
          value: "04",
          label: "停运",
        },
      ],
      options5: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "0",
          label: "否",
        },
      ],
      //表头数据
      tableColumn: [
        {
          label: "所属省",
          prop: "province",
          width: "auto",
        },
        {
          label: "所属地市",
          prop: "city",
          width: "auto",
        },
        {
          label: "运维单位",
          prop: "county",
          width: "auto",
        },
        {
          label: "所属变电站",
          prop: "powerStationName",
          width: "auto",
        },
        {
          label: "线路编号",
          prop: "id",
          width: "auto",
        },
        {
          label: "线路名称",
          prop: "lineName",
          key: "lineName",
          width: "auto",
        },
        {
          label: "电压等级",
          unit: "(kV)",
          prop: "voltageName",
          width: "auto",
        },
        {
          label: "运行状态",
          prop: "state",
          width: "auto",
        },
        {
          label: "线路额定容量",
          unit: "(MVA)",
          prop: "lineRatedCapacity",
          width: "auto",
        },
        {
          label: "分布式光伏接入容量",
          unit: "(MW)",
          prop: "hotovoltaicCapacity",
          width: "160",
        },
        {
          label: "是否实现监测",
          prop: "isMonitor",
          width: "auto",
        },
        {
          label: "监测点编号",
          prop: "monitorCode",
          width: "auto",
        },
      ],
      tableHeight: "100%", //表格高度
      tableData: [], //表格数据
      disabled: true,
      //查询参数
      queryParams: {
        page: 1,
        limit: 10,
        province: undefined, //所属省
        city: undefined, //所属地市
        organizationId: undefined, //运维单位
        state: undefined, //运行状态
        // powerStationId: undefined, //所属变电站编号
        // id: undefined, //线路编号
        // lineName: undefined, //线路名称
        // voltageLevel: undefined, //电压等级
        // lineRatedCapacity: undefined, //线路额定容量
        // hotovoltaicCapacity: undefined, //分布式光伏接入容量
        ifOnlineMonitor: undefined, //是否实现监测
      },
      //转接查询参数
      transfer: {
        page: 1,
        limit: 10,
        province: undefined, //所属省
        city: undefined, //所属地市
        organizationId: undefined, //运维单位
        state: undefined, //运行状态
        ifOnlineMonitor: undefined, //是否实现监测
      },
    };
  },
  created() {
    this.getList();
    // this.getLineValue();
  },
  mounted() {
    this.changeProvince();
  },
  methods: {
    changeProvince() {
      this.options2 = [];
      https(this.url.provinces).then((res) => {
        this.options1 = res.data;
        this.id = res.data.organizationId;
      });
    },
    changeProvinces(id) {
      https(this.url.cities, { organizationId: id }).then((res) => {
        this.options2 = res.data;
        this.cityId = res.data.organizationId;
      });
      this.queryParams.city = "";
      this.queryParams.organizationId = "";
      this.options3 = [];
      this.treeData = [];
      this.form.line = "";
      this.disabled = true;
    },
    changeCity(cityId) {
      https(this.url.operationMaintenanceUnit, { organizationId: cityId }).then(
        (res) => {
          this.options3 = res.data;
          this.countyId = res.data.organizationId;
        }
      );
      this.queryParams.organizationId = "";
    },
    prefectureCity() {
      if (this.queryParams.province != null) {
      } else {
        this.$message({
          showClose: true,
          message: "请先选择所属省",
        });
      }
    },
    Company() {
      if (this.queryParams.city != null) {
      } else {
        this.$message({
          showClose: true,
          message: "请先选择所属地市",
        });
      }
    },
    // 获取树列表字段
    getNode(data) {
      this.form.line = data.fname;
    },
    changeOperationMaintenanceUnit(countyId) {
      https(this.url.mediumVoltageLine, { organizationId: countyId }).then(
        (res) => {
          this.treeData = res.data;
        }
      );
      this.disabled = false;
    },
    //查询按钮事件
    search() {
      this.transfer = JSON.parse(JSON.stringify(this.queryParams));
      this.queryParams.page = 1;
      this.getList();
    },
    //重置按钮事件
    reset() {
      this.$refs.ruleForm.resetFields();
      this.checkedKeys = [];
      Object.assign(
        this.$refs.selectTree.$data,
        this.$refs.selectTree.$options.data()
      );
      this.options2 = [];
      this.options3 = [];
      this.treeData = [];
      this.disabled = true;
    },
    //导出按钮事件
    leadingOut() {
      POSTExportExcel(this.url.leadingOut, this.transfer);
    },
    //查询列表
    getList() {
      https(this.url.query, this.transfer).then((res) => {
        console.log(res);
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.tableData.forEach((item) => {
          item.state =
            item.state === "01"
              ? "运行"
              : item.state === "02"
              ? "检修"
              : item.state === "03"
              ? "调试"
              : "停运";
        });
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.transfer.limit = val;
      this.transfer.page = 1;
      this.getList();
    },
    handleCurrentChange(index) {
      console.log(`当前页: ${index}`);
      this.transfer.page = index;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.searchContainer {
  margin-left: -55px;
}
@media screen and (max-width: 1870px) {
  .searchContainer {
      margin-left: -14px;
  }
}
::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}
::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 0px;
}
</style>