带分页功能的多条件筛选--点击切换分页后，筛选失效

方式一：在点击分页时，触发分页组件中的页数改变函数，在这个函数中在调一次筛选函数

//筛选框
<el-form
    ref="selectForm"
    :inline="true"
    :model="formInline"
    class="demo-form-inline"
 >
    <el-form-item label="设备名称 / 备注:">
          <el-input placeholder="请输入" v-model="formInline.name"></el-input>
    </el-form-item>
    <el-form-item label="厂家名称:">
          <el-input placeholder="请输入" v-model="formInline.manufacturers"></el-input>
    </el-form-item>
    <el-form-item class="btn">
          <el-button type="primary" @click="search()">筛选</el-button>
          <el-button @click="reset()">重置</el-button>
     </el-form-item>
</el-form>

//分页组件
<Pagination
      @pageSizen="pageSizen"
      @currentPagen="currentPagen"
      :total="total"
      :currentPage="currentPage"
      :page-size="pageSize"
    >
    </Pagination>

点击筛选触发筛选函数

<script setup>
import getDeviceList from '/@/api/device'
const formquery=reactive({
    //默认第一页，一次十条
    page:1;
    pageSize:10;
})
const currentPage=ref(1);
const pageSize=ref(10);
const total=ref(0)
//切换页数
function currentPage(e){
    currentPage.value=e;
    formquery.page=e
    search()
};
//切换条数
function pageSizen(e){
    formquery.pageSize=e
};
//筛选函数
function search(){
    let datas={
        page:formquery.page;
        pageSize:formquery.pageSize;
        manufacturers:formInline.manufacturers;
        name:formInline.name;
    }
    //调接口，展示数据
    getDeviceList(datas).then((res) => {
          tableData.value = res.data.items;
          total.value = res.data.totalItems;
    });
}
</script>

方式二：监听页数的变化，页数一变化就重新调接口请求数据

<script setup>
import {watch} from 'vue'
import {getDeviceList} from '/@/api/device'
const currentPage=ref(1);
const pageSize=ref(10);
const total=ref(0);
const formquery=reactive({
    page:1,
    pageSize:10
})
//页数变化
function currentPagen(e){
    formquery.page=e
    currentPage.value=e
};
//条数变化
function pageSizen(e){
    formquery.pageSize=e
}
//定义一个空对象
const datas=reactive({});
//筛选事件触发时，给对象添加属性
function search(){
    datas.name=formInline.name;
    datas.manufacturers=formInline.manufacturers;
};
//监听页数的变化，把页数属性添加给对象
watch(()=>{
    datas.page=formquery.page;
    datas.pageSize=formquery.pageSize;
    getDeviceList(datas).then(res=>{
        tableData.value=res.data.items;
        total.value=res.data.totalItems
    })
})；
</script>