会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132435个问题
JAVA 全系列/第十三阶段:分布式文件存储与数据缓存/MongoDB 36197楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/手写服务器项目(旧) 36198楼
JAVA 全系列/第五阶段:JavaWeb开发/Ajax技术详解(旧) 36199楼
JAVA 全系列/第十八阶段:亿级高并发电商项目_架构/编码(旧)/电商:基于SpringSecurity实现后台登录功能 36200楼
WEB前端全系列/第二十阶段:Vue2企业级项目(旧)/疫情动态实时播报 36201楼
WEB前端全系列/第十一阶段:Nodejs编程模块--/Nodejs实战 36205楼

老师指点一下,我需要在右侧加一个滚动条分页加载数据,默认是每次加载15条,直到最后加载完,急急,谢谢


<template>
  <div class="animated fadeIn">
    <Row>
      <Col :sm="24" :md="24" :lg="23">
        <div class="con">
          <Input style="width:7%;margin-left:5px"  v-model="start_id"/>
          -
          <Input style="width:7%;margin-left:5px" v-model="end_id"/>
          <Input style="width:40%;margin-left:5px" placeholder="检索内容" v-model="search_data" @keyup.enter.native="search"/>
          <Button type="primary" style="margin-left:15px" @click="search">检索</Button>
          <!-- <Button type="primary" style="margin-left:15px" @click="check_add=true">新增</Button> -->
          <Button type="primary" style="margin-left:15px" id="excel" @click="excel_out">
            excel
            <Icon type="ios-download-outline" size=10 />
          </Button>
          <Checkbox @on-change="all_data" v-model="checked">
            <span> 导出全部数据</span>
          </Checkbox>
        </div>
      <!-- 数据列表  -->


          <Table :columns="sys_m" :data="sys_m_data_show"@scroll="scroll"  @on-select="select"   ref="selection" height=520 stripe border style="margin-top: -10px"></Table>

<!--        <div style="margin: 10px;overflow: hidden">-->
<!--          <div style="float: right;">-->
<!--            <Page :total="total" :current.sync="page" :page-size="15" show-elevator @on-change="page_c"></Page>-->
<!--          </div>-->
<!--        </div>-->


      </Col>
    </Row>
    <Modal v-model="check_change" title="机台信息修改" width="570" @on-ok="change" draggable scrollable>
      <div style="text-align:center">
        <Form inline :model="change_data">
          <FormItem label='机台编号' style="width:40%">
            <Input style="width:65%;" v-model="change_data.jtmJtbh" disabled/>*
          </FormItem>
          <FormItem label='机台名称' style="width:40%">
            <Input style="width:65%;" v-model="change_data.jtmJtmc" disabled/>
          </FormItem>
          <FormItem label='机台吨位' style="width:40%">
            <Input style="width:65%;" v-model="change_data.jtmJtdw" disabled/>*
          </FormItem>
          <FormItem label='所属组别' style="width:40%">
            <Input style="width:65%;" v-model="change_data.jtmBbdm" disabled/>*
          </FormItem>
          <FormItem label='模具最大宽度' style="width:40%">
            <Input style="width:51%;margin-left:-15px" v-model="change_data.jtmMaxkd"/>mm
          </FormItem>
          <FormItem label='模具最小宽度' style="width:40%">
            <Input style="width:51%;margin-left:-15px" v-model="change_data.jtmMinkd"/>mm
          </FormItem>
          <FormItem label='模具最大厚度' style="width:40%">
            <Input style="width:51%;margin-left:-15px" v-model="change_data.jtmMaxhd"/>mm
          </FormItem>
          <FormItem label='模具最小厚度' style="width:40%">
            <Input style="width:51%;margin-left:-15px" v-model="change_data.jtmMinhd"/>mm
          </FormItem>
          <FormItem style="width:80%;line-height:1">
            <div style="text-align:left;color: red;font-size: 10.5px;line-height:25px">
              <ul>
                <li>请用;隔开不同的材质和产品代号</li>
                <li>请输入*代替所有可生产的材质和产品</li>
              </ul>
            </div>
            <div style="text-align:left;font-size: 10.5px;line-height:25px">
              【可生产的塑料材质】
              <Input style="width:100%;" type="textarea" v-model="change_data.jtmCzdm"/>
            </div>
            <div style="text-align:left;font-size: 10.5px;line-height:25px">
              【可生产的产品代号】
              <Input style="width:100%;" type="textarea" v-model="change_data.jtmWldm"/>
            </div>

          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>
<script>
import * as util from '../../util'
export default {
  data () {
    return {
      loading:false,
      check_change:false,
      now_data:{},
      checked:false,
      start_id:1,
      end_id:999,
      total:1,
      page:1,
      search_data:'',
      change_data:{},
      sys_m:[
        {
          type: 'index',
          width: 35,
          align: 'center',
          fixed:'left'
        },
        {
          title:"机台",
          key:"jtmJtbh",
          width: 40,
          sortable:true,
        },
        {
          title:"机台名称",
          key:"jtmJtmc",
          width: 60,
          sortable:true,
        },
        {
          title:"吨位",
          key:"jtmJtdw",
          width: 40,
          sortable: true
        },
        {
          title:"组别",
          key:"jtmBbdm",
          width: 40,
          sortable:true,
        },
        {
          title:"模具最小宽度(mm)",
          key:"jtmMinkd",
          width: 110,
          sortable: true
        },
        {
          title:"模具最大宽度(mm)",
          key:"jtmMaxkd",
          width: 110,
          sortable: true
        },
        {
          title:"模具最小厚度(mm)",
          key:"jtmMinhd",
          width: 110,
          sortable: true
        },
        {
          title:"模具最大厚度(mm)",
          key:"jtmMaxhd",
          width: 110,
          sortable: true
        },
        {
          title:"可生产的塑料材质",
          key:"jtmCzdm",
          width: 120,
          sortable:true,
        },
        {
          title:"可生产的产品代号",
          key:"jtmWldm",
          width: 120,
          sortable:true,
        },
        {
          title:"操作",
          key:"action",
          width:70,
          fixed:'right',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '1px'
                },
                on: {
                  click: () => {
                    //this.show(params.index)
                    // this.now_op = params.index
                    this.change_data = JSON.parse(JSON.stringify(this.sys_m_data_show[params.index]))
                    // console.log(this.change_data)
                    this.check_change = true
                  }
                }
              }, '修改')
            ]);
          }
        }
      ],
      sys_m_data:[],
      sys_m_data_show:[],
    }
  },
  methods: {
  

    excel_out(){
      util.excel(this.sys_m_data,"机台特征",this.sys_m,1,1)
    },
    get_info (page) {
      console.log(page)
      this.page = page
      var url2 = 'project/machine/get_machine_features_info/'+page+'/'+15
      var url2_all = 'project/machine/get_machine_features_info/1/50000'
      util._fetch(url2,this,'info','get',this.search_data,page)
      util._fetch(url2_all,this,'info_all','get',this.search_data,page)
    },
    page_c(page){
      this.page=page
      page--
      this.sys_m_data_show = this.sys_m_data.slice(page*15,(page+1)*15)
    },
    change(){
      fetch(util.base_url+'project/machine/update_machine_features_info',{
        method:"POST",
        body:JSON.stringify([this.change_data]),
        headers:{"content-type":"application/json"}
      }).then(res=>res.text()).then(res=>{
        res = JSON.parse(res)
        if(res.msg!="success"){
          this.$Message.error(res.msg)
        }
        else{
          this.get_info(this.page)
          this.$Message.success("修改成功!")
        }
        //console.log(res)
      })
    },
    select(item){
      console.log(item)
    },
    search(){
      this.$Message.loading("加载中")
      var s = this.start_id-1
      var e = this.end_id
      var show_temp = []
      if(s<0||e<=0){
        this.$Message.error("无此id")
        return
      }
      if(s>e-1){
        this.$Message.error("无此id区间")
        return
      }
      fetch( util.base_url+'project/machine/get_machine_features_info/1/2000',{
        method:"GET",
        headers:{"content-type":"application/json"}
      }).then(res=>res.text()).then(res=>{
        // console.log(res)
        res = JSON.parse(res)
        if(res.msg=="success"){
          if(e>res.data.data.length-1) e = res.data.data.length
          if(this.search_data==''){

            this.sys_m_data_show = res.data.data.slice(s,e)
          }
          else{
            for(let i of res.data.data.slice(s,e)){
              //将对象转为字符串,检索其中是否有关键字,问题:中文异常
              var ci=JSON.stringify(i)
              if(ci.indexOf(this.search_data)==-1)continue
              show_temp.push(i)
            }
            this.sys_m_data_show = show_temp
          }
          // this.total = 10
        }
        else{
          alert(res.msg)
        }
      }).catch(err=>{
        alert(err+"网络原因:请检查网络连接或服务器状态")
        console.log(err+"网络原因:请检查网络连接或服务器状态")
      })
    },
    all_data(checked){
      if(checked){
        this.sys_m_data_show=this.sys_m_data
      }
      else{
        this.page_c(1)
      }
    },
  },
  mounted(){
    this.get_info(1)
    var table = document.getElementsByTagName("table")[0];
    util.cc(this.sys_m,table)
   

  }

}
</script>

blob.png

JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 36206楼
JAVA 全系列/第九阶段:权限控制与安全认证/Shiro 36208楼
JAVA 全系列/第六阶段:项目管理与SSM框架/Mybatis 36209楼
Python 全系列/第一阶段:Python入门/编程基本概念 36210楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637