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