vue element-ui el-form el-table 表单查询表格展示（可滚动加载）

Posted 2021-05-20 sunshineG

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
        },