Vue中使用Vue-scroll做表格使得在x轴滑动

页面效果

首先

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%; // 可以使用coverbackground-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>