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 表单查询、表格展示(可滚动加载)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程