老师指点一下,我需要在右侧加一个滚动条分页加载数据,默认是每次加载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>
京公网安备 11011402011233号