vue 滚动加载
-
vue element-ui
-
功能:
-
el-form
-
el-table 默认展示所有数据,点击查询时,展示查询到的数据
<!-- 1.查询表单 --> <el-form> <el-row> <el-col :span='12'> <el-form-item label="名称"> <el-input v-model="queryParams.pcustName" clearable placeholder="请输入名称" style="width:200px" > <!-- clearable 输入框可清除属性 --> </el-input> </el-form-item> </el-col> <el-col :span='12'> <el-form-item label="客户类别"> <el-select v-model="queryParams.custClass" clearable > <el-option v-for="item in typeOption" :key= "item.value" :label="item.label" :value ="item.value" > </el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row :span="8"> <el-button type="primary" @click="doQuery"> 查询</el-button> </el-row> </el-form>
-
<!-- 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
},