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