效果如下
表头是div,下面是van-list
<template>
<div class="table-container">
<Card title="组合展示">
<div class="myTable" ref="container">
<div class="box">
<div class="box1">产品组合</div>
<div class="box2">
<!-- 左侧净值和日期 -->
<div class="title">
<p class="p1">净值</p>
<p class="p2">2-20</p>
</div>
<!-- 右侧排序 -->
<div class="mySort">
<div class="top" @click="nowsx"><img src="@/assets/image/navInquiry/上.png"></div>
<div class="bottom" @click="nowjx"><img src="@/assets/image/navInquiry/下.png"></div>
</div>
</div>
<div class="box2">
<!-- 左侧净值和日期 -->
<div class="title">
<p class="p1">净值</p>
<p class="p2">2-19</p>
</div>
<!-- 右侧排序 -->
<div class="mySort">
<div class="top" @click="yesSx">
<img src="@/assets/image/navInquiry/上.png">
</div>
<div class="bottom" @click="yesJx"><img src="@/assets/image/navInquiry/下.png"></div>
</div>
</div>
</div>
<div class="myList">
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="init('加载')">
<div v-for="(item, index) in list" :key="index">
<div class="myListBox">
<div class="box1">
<p class="p1">{{ item.name }}</p>
<div class="p2">
<p class="p3">{{ item.bh }}</p>
<p class="p4">
<img class="img" src="@/assets/image/navInquiry/图标.png">
查看图表
</p>
</div>
</div>
<div class="box2">
<!-- 左侧净值和日期 -->
<div class="title">
<p class="p1">{{ item.nowjz }}</p>
<p class="p2">{{ item.add }}%</p>
</div>
</div>
<div class="box2">
<!-- 左侧净值和日期 -->
<div class="title">
<p class="p1">{{ item.yesjz }}</p>
<p class="p2">-{{ item.myjs }}%</p>
</div>
</div>
</div>
<van-divider />
</div>
</van-list>
</div>
</div>
</Card>
</div>
</template>
<script>
import Vue from "vue"
import { Icon, List, Loading, Divider } from "vant"
import Card from "@/components/Card.vue"
Vue.use(Divider)
Vue.use(Loading)
Vue.use(List)
Vue.use(Icon)
export default {
name: "Table",
data () {
return {
list: [
{
name: "新华中证半导体材料设备主题Eft",
bh: "006145",
nowjz: "1.67777",
add: "+0.92",
yesjz: "1.67777",
myjs: "0.1",
},
{
name: "新华中证半导体材料设备主题Eft",
bh: "006145",
nowjz: "1.67777",
add: "+0.94",
yesjz: "1.67777",
myjs: "0.3",
},
{
name: "新华中证半导体材料设备主题Eft",
bh: "006145",
nowjz: "1.67777",
add: "+0.93",
yesjz: "1.67777",
myjs: "0.2",
},
],
loading: false,
finished: false,
}
},
created () {
this.init('创建')
window.addEventListener("scroll", this.Scrollbottom) //页面加载时监听滚动事件
},
destroyed () {
window.removeEventListener("scroll", this.Scrollbottom) //页面离开后销毁监听事件
},
methods: {
init (text) {
console.log(text)
console.log("这里写list", this.list)
},
Scrollbottom () {
let scrollTop =
document.documentElement.scrollTop || document.body.scrollTop
let clientHeight = document.documentElement.clientHeight
let scrollHeight = document.documentElement.scrollHeight
if (scrollTop + clientHeight >= scrollHeight) {
console.log("滚动到底部了")
this.pageNo++
console.log(this.pageNo)
}
},
//今日升序
nowsx () {
this.list.sort(function (a, b) {
console.log(a.add)
console.log(a.add - b.add)
return a.add - b.add
})
},
//今日降序
nowjx () {
this.list.sort(function (a, b) {
return b.add - a.add
})
},
//昨日升序
yesSx () {
console.log("点击")
this.list.sort(function (a, b) {
console.log(a.myjs)
console.log(b.myjs)
console.log(a.myjs - b.myjs)
return a.myjs - b.myjs
})
},
//昨日降序
yesJx () {
this.list.sort(function (a, b) {
return b.myjs - a.myjs
})
console.log(this.list)
},
},
components: {
Card,
},
}
</script>
<style lang="scss" scoped>
.table-container {
@import "@/css/table.scss";
.transparent-table {
@include transparent-table;
}
.myTable {
width: 100%;
height: calc(100vh - 255px);
overflow: hidden;
.box {
padding: 0 5px;
display: flex;
color: var(--font-color);
font-size: 12px;
margin-top: 12px;
height: 50px;
background: var(--table-column-bg-color);
font-weight: bold;
.box1 {
width: 52%;
font-size: 14px;
line-height: 50px;
}
.box2 {
width: 17%;
display: flex;
margin-left: 7%;
font-size: 10px;
.mySort {
margin-top: 15px;
}
.title {
font-size: 14px;
.p1 {
margin-top: 5px;
}
.p1,
.p2 {
font-weight: bold;
font-size: 12px;
color: var(--font-color);
line-height: 22px;
}
}
}
}
.myList {
margin-top: 10px;
width: 100%;
height: calc(100vh - 300px);
overflow: auto;
font-family: PingFang SC;
.myListBox {
display: flex;
color: var(--font-color);
font-size: 12px;
.box1 {
width: 52%;
font-size: 14px;
.p1 {
height: 30px;
font-weight: bold;
font-size: 14px;
color: var(--font-color);
line-height: 22px;
}
.p2 {
display: flex;
margin-top: 20px;
.p3 {
width: 43px;
height: 18px;
font-weight: 500;
font-size: 12px;
color: #999999;
}
.p4 {
padding: 0 5px;
margin-left: 10px;
width: 60px;
height: 18px;
background: #e6eeff;
border-radius: 5px 0px 5px 0px;
font-weight: bold;
font-size: 10px;
color: #075AFF;
line-height: 18px;
.img {
width: 10px;
height: 10px;
}
}
}
}
.box2 {
width: 17%;
display: flex;
margin-left: 7%;
font-weight: bold;
.p1 {
font-size: 14px;
color: var(--font-color);
line-height: 23px;
}
.p2 {
font-weight: bold;
font-size: 12px;
color: #EE3D30;
line-height: 23px;
}
}
}
}
}
/deep/.van-divider,
.van-divider--hairline {
margin: 10px 0;
}
/deep/.van-divider,
.van-divider--hairline::before {
background-color: var(--NAVInquiry-divider-line-color);
opacity: 0.3;
}
}
</style>
其中Card组件是我自定义的卡片组件,删掉即可,不影响表格功能