安装:npm i element-resize-detector
引入页面:import elementResizeDetectorMaker from "element-resize-detector";
mounted:
erd.listenTo(document.getElementById("mui-table-view"), element => {//监听div的大小 注意div为父级
var width = element.offsetWidth;
//var height = element.offsetHeight;
var that = this;
let Nums = this.url.length; // url[ ]数组的个数
let num = parseInt(width / 257); //一行个数
let Sals = Nums % num; //最后一行个数
let numss;
if (Sals > 0) { //如果最后一行剩余个数大于0
numss = num - Sals //需要补充的个数
}
this.size = num * 2; //分页的 page-size (可以根据要显示的行数做调整,当前显示两行)
// console.log(num,'一行总个数')
// console.log(num,'一行总个数')
// console.log(numss,'补充个数')
// console.log(Sals,'最后一行个数')
this.menuFindAll();//调用分页函数
});
html
<div v-for="(ite,index) in numss" :key='index' class="isnull" ></div>
style
.isnull{
display: flex;
width: 241px;
margin: 8px;