使用瀑布流组件
<template>
<div class="app-container">
<waterfall :col="2" :width="itemWidth" :gutter-width="gutterWidth" :data="[]">
<el-table
v-for="(tableData, index) in tableDataList"
:key="'tableData' + index"
:data="tableData"
style="margin-top: 10px"
>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="age"></el-table-column>
</el-table>
</waterfall>
</div>
</template>
<script>
export default {
name: 'VueWaterfall',
data() {
return {
tableDataList: [],
itemWidth: 200,
gutterWidth: 20
}
},
created() {
this.getList()
},
mounted() {
this.$nextTick(() => {
this.setWaterFallWidth()
})
window.addEventListener('resize', this.setWaterFallWidth)
},
beforeDestroy() {
window.removeEventListener('resize', this.setWaterFallWidth)
},
methods: {
// 模拟接口请求
getList() {
setTimeout(() => {
Promise.resolve().then(() => {
this.tableDataList = this.getMockData()
})
}, 200)
},
getRandomInt(min = 0, max = 10) {
return Math.floor(Math.random() * (max - min)) + min
},
getMockData() {
let tableDataList = []
for (let i = 0; i < 10; i++) {
tableDataList.push(new Array(this.getRandomInt()).fill({ name: 'Matt', age: i }))
}
return tableDataList
},
// 动态设置瀑布流元素宽度
setWaterFallWidth() {
const containerEl = document.querySelector('#vueWaterfall')
const els = document.querySelectorAll('.vue-waterfall-column')
const waterfallWidth = (containerEl.clientWidth - this.gutterWidth) / 2
els.forEach((el) => {
el.style.width = waterfallWidth - 1 + 'px' // 缩放至90%时，不-1一行只能放下一个
})
}
}
}
</script>
<style scoped lang="scss"></style>
// main.js
import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
参考文档：
npm：www.npmjs.com/package/vue…
github：github.com/AwesomeDevi…
