vue element-ui el-form el-table 表单查询、表格展示(可滚动加载)
2021/5/20 10:29:10
本文主要是介绍vue element-ui el-form el-table 表单查询、表格展示(可滚动加载),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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 },
这篇关于vue element-ui el-form el-table 表单查询、表格展示(可滚动加载)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-06vue 新建功能多条数据(还没和后端交互)还能看详情 数据是前端缓存到本地吗?-icode9专业技术文章分享
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode