通用分页表格组件完善（增加自动根据窗口大小设置分页大小）

src/components/crudtable/CrudTable.vue

@@ -42,7 +42,7 @@
 		pageSize:Number,
 		pageSizeOpts:{
 			type:Array,
-			default:[10,20,50,100]
+			default:[10,20,30,50,100]
 		},
 		pageInfoOpts:String,
 		url:String,
@@ -51,12 +51,16 @@
 		autoLoad:{
 			type:Boolean,
 			default:true
+		},
+		autoPageSize:{
+			type:Boolean,
+			default:false
 		}
 	})
 	
 	const pagination=reactive({
 		currentPage:1,
-		pageSize:props.pageSize||5,
+		pageSize:props.pageSize||10,
 		totalRows:0,
 		pageCount:1,
 		watchReload:true //通过监听器重载
@@ -66,7 +70,12 @@
 	const tableDatas=ref([])
 	
 	
-	onMounted(()=>{
+	onMounted(async ()=>{
+		
+		if(props.autoPageSize){
+			autoPageSize()
+		}
+		
 		
 		if(props.url&&props.autoLoad){
 			query()
@@ -76,6 +85,30 @@
 		}
 	})
 	
+	const autoPageSize=async ()=>{
+		let pro= new Promise((resolve, reject)=>{
+			setTimeout(()=>{
+				//console.log('sleep 10')
+				resolve(true)
+			},10)
+		})
+		
+		let rect=document.querySelector('.tab-main').getBoundingClientRect()
+		while(!rect || rect.height<=0){
+			await pro.catch(err=>{console.log(err)})
+			rect=document.querySelector('.tab-main').getBoundingClientRect()
+		}
+		//console.log(rect)
+		
+		let rowCount=Math.ceil((rect.height-40)/42)
+		rowCount=props.pageSizeOpts.find(val=>val>=rowCount)
+		if(!rowCount){
+			rowCount=100
+		}
+		toRaw(pagination).pageSize=rowCount
+		
+	}
+	
 	let _queryParam={}
 	
 	
@@ -181,6 +214,7 @@
 	
 	.tab-main{
 		height: calc(100% - 50px);
+		border:0px;
 	}