页面效果
首先
npm i vuescroll在main.js中挂载到全局
页面代码
<template>
<div class="app-container">
<Header :title='title' @goback='goBack'>
<template v-slot:icon>
<van-icon @click='goHome' class='icon' name='wap-home-o' />
</template>
</Header>
<div class="table_box">
<vue-scroll :ops="ops" style="width:100%;height:100%">
<div class="data-box">
<van-row class="th-row" style="display:flex;">
<van-col style="width:90px;text-align: center;border-right: 1px solid #ddd;">序号</van-col>
<van-col style="width:90px;text-align: center;border-right: 1px solid #ddd;">门店名称</van-col>
<van-col style="width:90px;text-align: center;border-right: 1px solid #ddd;">是否认购</van-col>
<van-col style="width:90px;text-align: center;border-right: 1px solid #ddd;">认购目标(分)</van-col>
<van-col style="width:90px;text-align: center;border-right: 1px solid #ddd;">本月完成(分)</van-col>
<van-col style="width:90px;text-align: center;border-right: 1px solid #ddd;">是否达时序</van-col>
<van-col style="width:90px;text-align: center;border-right: 1px solid #ddd;">当前进度</van-col>
<van-col style="width:90px;text-align: center;border-right: 1px solid #ddd;">是否需预警</van-col>
</van-row>
<!-- 数据循环展示，checkbox可以进行选择-->
<van-row class="td-row" :style="{ background: index % 2 == 0 ? '#fefefe' : '#f3f3f3' }"
v-for="(item, index) in accountList" :key="index">
<van-col class="common-ellipsis" @click="showContent(item.workerNo)">{{ item.workerNo }}</van-col>
<van-col class="common-ellipsis" @click="showContent(item.workerName)">{{ item.workerName }}</van-col>
<van-col class="common-ellipsis" @click="showContent(item.salary)">{{ item.salary }}</van-col>
<van-col class="common-ellipsis" @click="showContent(item.amount)">{{ item.amount }}</van-col>
<van-col class="common-ellipsis" @click="showContent(item.amountTime, 1)">{{ item.amountTime
|dateFormat}}</van-col>
<van-col class="common-ellipsis" @click="showContent(item.remark)">{{ item.remark }}</van-col>
<van-col class="common-ellipsis" @click="showContent(item.remark)">{{ item.remark }}</van-col>
<van-col class="common-ellipsis" @click="showContent(item.remark)">{{ item.remark }}</van-col>
</van-row>
</div>
</vue-scroll>
</div>
<!-- 弹出省略的内容 -->
<van-popup v-model="showPopup" class="hidden-wrap">
<van-row class="hidden-content">{{ ellContent }}</van-row>
</van-popup>
</div>
</template>
<script>
import Header from '../components/header'
export default {
name: "vantTable",
components: { Header },
filters: {
dateFormat: function (val) {
//省略......
return val;
}
},
data() {
return {
title: "积分认购一览表",
dataform: {
queryStr: '',
},
isCheckAll: false,
showPopup: false, // 显示省略的内容
ellContent: "", // 省略的内容
costName: "",
checkedVal: [],
accountList: [
{ workerNo: "1", workerName: "张良", salary: "1000", amount: "50000", amountTime: "20021201", remark: "弄啥咧" },
{ workerNo: "2", workerName: "天明", salary: "1111", amount: "40000", amountTime: "20021203", remark: "弄啥咧" },
{ workerNo: "3", workerName: "少司命", salary: "1222", amount: "60000", amountTime: "20021001", remark: "弄啥咧" },
{ workerNo: "4", workerName: "高渐", salary: "1333", amount: "20000", amountTime: "20021021", remark: "弄啥咧" },
{ workerNo: "5", workerName: "雪女", salary: "1444", amount: "10000", amountTime: "20020801", remark: "弄啥咧" },
],
ops: {
vuescroll: {},
scrollPanel: {},
rail: {
keepShow: true
},
bar: {
hoverStyle: true,
onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
background: "#F5F5F5",//滚动条颜色
opacity: 0.5,//滚动条透明度
"overflow-y": "hidden" //使用横向滚动 竖向就是"overflow-x": "hidden"
}
}
};
},
created() { },
methods: {
goBack() {
this.$router.go(-1)
},
goHome() {
this.$router.push('/index')
},
// 显示省略的内容
showContent(content, type) {
if (content == "") {
return;
} else {
if (type == 1) {
var format = this.$options.filters['dateFormat'];
//日期通过过滤器格式化一下
this.ellContent = format(content)
} else {
this.ellContent = content;
}
this.showPopup = true;
}
},
checkAll() {
if (!this.isCheckAll) {
this.$refs.checkboxGroup.toggleAll(true);
this.isCheckAll = true;
} else {
this.$refs.checkboxGroup.toggleAll();
this.isCheckAll = false;
}
},
onSearch() {
},
cLearSearch() {
},
checkChange() {
},
},
};
</script>
<style lang="less" scoped>
.app-container{
background-color: #fff;
height: 100vh;
.table_box{
padding: 10px;
margin-top: 20px;
.data-box {
font-size: 13px;
margin: 12px 0px;
border: 1px solid #d0f2f0;
.th-row {
height: 30px;
line-height: 30px;
padding: 0px 12px;
background: #d0f2f0;
}
.td-row {
height: 30px;
line-height: 30px;
padding: 0px 12px;
}
}
}
}
// 超出 1 行显示省略号
.common-ellipsis {
width: 90px;
height: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-right: 1px solid #ddd;
text-align: center;
}
// 滚动条位置 --展示横向
/deep/.__bar-is-vertical {
display: none !important;
}
// 隐藏横向滚动条
/deep/.__bar-is-horizontal {
bottom: -1px !important;
}
</style>其中有个组件的代码header.vue
<template>
<div class="head_box">
<header>
<div class="back">
<img @click="goBack" src="../assets/back_on.png" alt="" />
</div>
<div class="home_title_container">
<h3 style="font-weight: normal;font-size: 20px;">{{title}}</h3>
</div>
<div class="home_func">
<slot name="icon"></slot>
</div>
</header>
</div>
</template>
<script>
export default {
name: 'org',
props:{
title:{
}
},
data() {
return {
}
},
methods: {
goBack() {
this.$emit('goback')
},
},
}
</script>
<style lang="less" scoped>
.head_box{
height: 2rem;
}
header {
z-index: 999;
color: red;
text-align: center;
height: 3rem;
background: url('../assets/bg1.png');
width: 100%;
background-size: 100% 100%; // 可以使用cover
background-repeat: no-repeat;
background-origin: border-box; //从border开始填充
background-clip: border-box;
display: flex;
justify-content: center;
position: fixed;
top: 0;
.back {
padding-left: 15px;
img {
align-self: center;
display: flex;
flex-direction: column;
justify-content: center;
height: 1.5rem;
}
width: 20%;
height: 100%;
text-align: left;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.home_func {
display: flex;
justify-content: center;
flex: 1;
width: 30%;
height: 100%;
font-size: 1.6rem;
line-height: 1.5rem;
color: #fff;
.icon {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
img{
display: inline-block;
width: 30px;
height: 30px;
align-self: center;
}
}
.home_title_container {
width: 70%;
// height: 1.207729rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 0.434783rem;
line-height: 0.724638rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #fff;
h4 {
font-size: 0.434783rem;
line-height: 0.483092rem;
height: 0.483092rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>
注意
记得替换图片 ！！！！
vant版本是2.x ！！！
