本文主要是介绍vue element-ui el-form el-table 表单查询、表格展示(可滚动加载),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
vue 滚动加载
<!-- 2.列表展示(可勾选) -->
<el-table
v-scroll="getList"
:data="tableData"
@selection-change="handleSelectChange"
v-loading="loading"
height="600"
style="overflow-y:auto"
>
<!-- selection-change 当列表项前面的多选框勾选状态发生变化时,触发的事件 -->
<el-table-column
:selectable="checkSelectable"
v-for="column in tableColums"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:type="column.type"
>
<!-- selectable 多选框是否禁用 -->
</el-table-column>
</el-table>
data(){
return {
loading:true,//是否显示加载圈
busy:true,//是否可以请求
queryParams:{
pcustName:'',
custClass:''
},
typeOption:[
{lable:'类别1',value:'0'},
{lable:'类别2',value:'1'},
{lable:'类别3',value:'2'},
],
tableData:[],
loading:true,
multipleSelection:[]
}
},
async getList(msg){
this.loading = true
if(msg=="query"||this.isApply){//查询列表的时候
this.busy = true
this.pageData.currentPage=1
}
if(this.busy){//是否允许再加载数据的变量,初始化为true,所以此函数至少调用一次
let params = {
params1:"",
params2:"",
pageNo:this.pageData.currentPage++,
pageSize:this.pageData.rows
}
let res = await toGetList(params)
if(res.code=='200'){
let list = res.data
if(msg=="query"){
this.tableData = list
}else{
this.tableData = this.tableData.concat(list)
}
if(list.length==0||list.length<this.pageData.rows){
this.busy = false
}
this.isApply = false
}
this.loading=true
}
}
doQuery(){
this.getList('query')
},
//批量操作时,(列表项勾选一个或多个时)
handleSelectChange(val){
this.multipleSelection = []
val.forEach(item => {
this.multipleSelection.push(item.pcustNo)
});
},
// 选择框禁用的条件 true 可选 false 不可选
checkSelectable(row){
return row.status==1
},
这篇关于vue element-ui el-form el-table 表单查询、表格展示(可滚动加载)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!