vant 分页使用

<van-pagination
    @change="handleCurrentChange"
     v-model="searchFrom.page"
     :total-items="total_page"
     :page-count="pagenum"
     force-ellipses
/>


 //搜索
  saveEdit(flag) {
              
     this.searchFrom.admin_id =  this.admin_id;
     this.searchFrom.area =  this.searchFrom.id;
     this.$post('/admin/DgGarden/garden_list', this.searchFrom).then((res) => {
       if(res.data.data.length > 0){
              this.tableData = res.data.data;
              this.total_page = res.data.total;  //总记录数据
              //this.page_size = res.data.limit;  
              this.pagenum = res.data.last_page; //总页码数
              this.is_table = 1;
            }
       })

  },



            // 分页导航
            handleCurrentChange(val) {
                console.log('555',val)
                this.searchFrom.page = val;
                this.saveEdit();
            },

 

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
智慧农业是一种结合了现代信息技术,包括物联网、大数据、云计算等,对农业生产过程进行智能化管理和监控的新模式。它通过各种传感器和设备采集农业生产中的关键数据,如大气、土壤和水质参数,以及生物生长状态等,实现远程诊断和精准调控。智慧农业的核心价值在于提高农业生产效率,保障食品安全,实现资源的可持续利用,并为农业产业的转型升级提供支持。 智慧农业的实现依赖于多个子系统,包括但不限于设施蔬菜精细化种植管理系统、农业技术资料库、数据采集系统、防伪防串货系统、食品安全与质量追溯系统、应急追溯系统、灾情疫情防控系统、农业工作管理系统、远程诊断系统、监控中心、环境监测系统、智能环境控制系统等。这些系统共同构成了一个综合的信息管理和服务平台,使得农业生产者能够基于数据做出更加科学的决策。 数据采集是智慧农业的基础。通过手工录入、传感器自动采集、移动端录入、条码/RFID扫描录入、拍照录入以及GPS和遥感技术等多种方式,智慧农业系统能够全面收集农业生产过程中的各种数据。这些数据不仅包括环境参数,还涵盖了生长状态、加工保存、检验检疫等环节,为农业生产提供了全面的数据支持。 智慧农业的应用前景广阔,它不仅能够提升农业生产的管理水平,还能够通过各种应用系统,如库房管理、无公害监控、物资管理、成本控制等,为农业生产者提供全面的服务。此外,智慧农业还能够支持政府监管,通过发病报告、投入品报告、死亡报告等,加强农业产品的安全管理和质量控制。 面对智慧农业的建设和发展,存在一些挑战,如投资成本高、生产过程标准化难度大、数据采集和监测的技术难题等。为了克服这些挑战,需要政府、企业和相关机构的共同努力,通过政策支持、技术创新和教育培训等手段,推动智慧农业的健康发展。智慧农业的建设需要明确建设目的,选择合适的系统模块,并制定合理的设备布署方案,以实现农业生产的智能化、精准化和高效化。
vant 组件库中的 Table 表格组件是一个高效、灵活、易用的数据展示组件,可以在 web 应用程序中方便地展示表格数据。 使用步骤如下: 1. 安装 vant 组件库:可以通过 npm install vant 命令进行安装。 2. 引入 vant 组件库:在需要使用 Table 表格组件的页面中引入 vant 组件库。 3. 引入 Table 组件:在需要使用 Table 表格组件的页面中引入 Table 组件。 4. 在页面中使用 Table 组件:使用 Table 组件的时候需要传入一些参数来指定表格的数据源、列定义、分页等相关信息。 以下是一个简单的 Table 表格组件的使用示例: ``` <template> <van-table :columns="columns" :data="tableData" :loading="loading" :total="total" :page-size="pageSize" :current-page="currentPage" @change="handleTableChange" /> </template> <script> import { Toast, Table } from 'vant'; export default { components: { [Table.name]: Table, }, data() { return { columns: [ { title: '姓名', key: 'name' }, { title: '年龄', key: 'age' }, { title: '地址', key: 'address' }, ], tableData: [], loading: true, total: 0, pageSize: 10, currentPage: 1, }; }, mounted() { this.loadTableData(); }, methods: { async loadTableData() { try { const res = await fetch('/api/table-data'); const json = await res.json(); this.tableData = json.list; this.total = json.total; } catch (e) { console.error(e); Toast.fail('加载数据失败,请稍后重试!'); } finally { this.loading = false; } }, handleTableChange({ current }) { this.currentPage = current; this.loadTableData(); }, }, }; </script> ``` 在上面的示例中,我们通过 columns 属性定义了表格的列,通过 data 属性指定了表格的数据源,通过 loading 属性指定了表格是否处于加载状态,通过 total 属性指定了表格数据的总数,通过 pageSize 和 currentPage 属性指定了表格的分页信息。同时使用 @change 事件监听表格的分页切换事件,当分页信息发生变化时重新加载表格数据。 需要注意的是,Table 组件的数据源需要是一个数组,其中每个元素代表一行数据,每个元素的属性名需要与 columns 中定义的 key 属性相对应。如果数据源比较大,需要进行分页,可以通过服务器端接口返回分页相关信息,然后在前端根据分页信息进行数据请求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值