這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 使用ElementPlus的Table啥都好，就是沒有可編輯表格！！！😭 既然UI庫不支持，那我們實現一個可編輯表格是很難的事麽？😒難麽？😢不難麽？... 個人覺得如果是業務固定的可編輯表格，使用ElementPlus實現都不難。但 ...
前端vue仿京東天貓簡單好用的瀑布流瀑布流式佈局列表組件waterfall， 下載完整代碼請訪問uni-app插件市場址:https://ext.dcloud.net.cn/plugin?id=13046
效果圖如下：
使用方法
<!-- proList: 條目數組數據 goProDetail:條目點擊事件跳轉（實現了點擊條目數據傳值）-->
<ccWaterListView :proList="projectList" @click="goProDetail"></ccWaterListView>
HTML代碼部分
<template>
<view class="content">
<!-- proList: 條目數組數據 goProDetail:條目點擊事件跳轉（實現了點擊條目數據傳值）-->
<ccWaterListView :proList="projectList" @click="goProDetail"></ccWaterListView>
</view>
</template>
JS代碼 （引入組件 填充數據）
<script>
import ccWaterListView from '../../components/ccList/ccWaterListView.vue';
export default {
components: {
ccWaterListView,
},
data() {
return {
// 列表數組
projectList: []
}
},
mounted() {
this.requestData();
},
methods: {
// 列表條目點擊事件
goProDetail(item) {
console.log("條目數據 = " + JSON.stringify(item));
uni.showModal({
title:'選擇條目',
content:'選擇條目數據 = ' + JSON.stringify(item)
})
},
requestData() {
// 模擬請求參數設置
let reqData = {
'area': '',
"pageSize": 10,
"pageNo": this.curPageNum
}
// 模擬請求介面
this.totalNum = 39;
this.projectList = [];
let imgArr = ['https://images.pexels.com/photos/7214784/pexels-photo-7214784.jpeg?auto=compress&cs=tinysrgb&w=800',
'https://cdn.pixabay.com/photo/2014/07/08/14/14/resolution-387446_1280.jpg',
'https://images.pexels.com/photos/5202162/pexels-photo-5202162.jpeg?auto=compress&cs=tinysrgb&w=800',
'https://images.pexels.com/photos/4967533/pexels-photo-4967533.jpeg?auto=compress&cs=tinysrgb&w=800',
'https://images.pexels.com/photos/8679339/pexels-photo-8679339.jpeg?auto=compress&cs=tinysrgb&w=800',
'https://images.pexels.com/photos/209339/pexels-photo-209339.jpeg?auto=compress&cs=tinysrgb&w=800']
let nameArr = ['冰糖心蘋果 紅富士大果出售 應季水果 繁榮種植園','農鮮洛川紅富士蘋果16枚，單果160g,新鮮飽滿水分充足','甜醉了 煙臺蘋果棲霞紅富士新鮮水...','惠尋 山東煙臺紅富士蘋果12枚 果徑...']
for (let i = 0; i < 20; i++) {
this.projectList.push({
'proImg': imgArr[i%6],
'proName': nameArr[i%4],
'proDetail': '我是產品詳情' + i,
'proPrice': 60 + 6 * i + '元',
'status': (i % 3 == 0)?'618':'',
'id': i + ''
});
}
}
}
}
</script>
CSS
<style>
page {
background-color: #f7f7f7;
}
.content {
display: flex;
flex-direction: column;
}
</style>
