vue+vant移动端显示table表格加横向滚动条

这篇具有很好参考价值的文章主要介绍了vue+vant移动端显示table表格加横向滚动条。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

参考文章:

https://blog.csdn.net/weixin_46511008/article/details/127210738
https://my.oschina.net/u/4261744/blog/3315859

vant移动端显示table效果,增加复选框,可以进行多选和全选。加横向滚动条,可以看全部内容。

主要是参考上面两篇文章。

页面效果


vant 横向滑动,vue,前端,前端,javascript,html

vant 横向滑动,vue,前端,前端,javascript,html文章来源地址https://www.toymoban.com/news/detail-580490.html

代码


<template>
    <div class="app-container">
        <div class="nav_text" style="position: relative;">
            <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="$router.go(-1);"/>
        </div>
        <!--查询框-->
        <div class="search">
                <van-search v-model="dataform.queryStr" placeholder="请输入编号或者姓名查询"
                    show-action
                    @search="onSearch"
                    clearable
                    @clear="cLearSearch">
                  <template #action>
                    <div @click="onSearch">搜索</div>
                 </template>
                </van-search>
          </div>
        
        <!-- 显示列表 滚动条https://my.oschina.net/u/4261744/blog/3315859 -->
        <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:40px">
                        <van-button size="mini" type="danger" style="display: flex;margin-top:4px;" @click="checkAll">
                            全选
                        </van-button>
                    </van-col>
                    <van-col style="width:80px">编号</van-col>
                    <van-col style="width:80px">姓名</van-col>
                    <van-col style="width:80px">工资</van-col>
                    <van-col style="width:80px">保额</van-col>
                    <van-col style="width:80px">时间</van-col>
                    <van-col style="width:80px">备注</van-col>
                </van-row>
                
                <!-- 数据循环展示,checkbox可以进行选择-->
                <van-checkbox-group ref="checkboxGroup" @change="checkChange" v-model="checkedVal">
                    <van-row class="td-row" :style="{background:index %2==0?'#fff':'#ffcccc'}" v-for="(item,index) in accountList" :key="index" >
                
                        <van-col style="width:40px">
                
                            <van-checkbox style="padding-top: 4px;padding-left:10px;" icon-size="18px" :name="item" v-model="item.checked">
                            </van-checkbox>
                        </van-col>
                        <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-row>
                </van-checkbox-group>
            </div>
        </vue-scroll>
        
        <!-- 弹出省略的内容 -->
        <van-popup v-model="showPopup" class="hidden-wrap">
          <van-row class="hidden-content">{{ ellContent }}</van-row>
        </van-popup>
  </div>
 </template>   
     <script>
    export default {
      name: "vantTable",
      filters:{
        dateFormat:function(val){
            //省略......
            return val;
        }
      },
      data() {
        return {
          title:"测试",
          dataform:{
              queryStr:'',
          },
          isCheckAll:false,
          showPopup: false, // 显示省略的内容
          ellContent: "", // 省略的内容
          costName: "",
          checkedVal:[],
          accountList: [
            { workerNo: "122212122", workerName: "张良-牛牛牛牛", salary: "1000", amount: "50000", amountTime: "20021201" ,remark:"what are you 弄啥咧" },
            { workerNo: "133131331", workerName: "天明-牛牛", salary: "1111", amount: "40000", amountTime: "20021203" ,remark:"what are you 弄啥咧" },
            { workerNo: "1423241232", workerName: "少司命-牛牛牛牛牛", salary: "1222", amount: "60000", amountTime: "20021001"  ,remark:"what are you 弄啥咧"},
            { workerNo: "15231313133", workerName: "高渐离-牛牛牛牛牛", salary: "1333", amount: "20000", amountTime: "20021021" ,remark:"what are you 弄啥咧" },
            { workerNo: "162342342342", workerName: "雪女-牛牛牛牛牛牛", salary: "1444", amount: "10000", amountTime: "20020801",remark:"what are you 弄啥咧"  },
          ],
          ops: {
            vuescroll: {},
            scrollPanel: {},
            rail: {
            keepShow: true
            },
            bar: {
            hoverStyle: true,
            onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
            background: "#F5F5F5",//滚动条颜色
            opacity: 0.5,//滚动条透明度
            "overflow-y": "hidden" //使用横向滚动 竖向就是"overflow-x": "hidden"
            }
        }
        };
      },
      created() {},
      methods: {
        // 显示省略的内容
        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>
     
     .data-box{
        font-size:13px;
        margin:12px 0px;
        border:1px solid #fd7273;
        
        .th-row{
            height:30px;
            line-height:30px;
            padding:0px 12px;
            background:#fd7273;
        }
        .td-row{
            height:30px;
            line-height:30px;
            padding:0px 12px;
        }
        
    }
     
    // 超出 1 行显示省略号
    .common-ellipsis {
      width:80px;
      height: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    // 滚动条位置 --展示的是竖向
    // /deep/.__bar-is-vertical {
    // right: -1px !important;
    // }
    // // 隐藏横向滚动条
    // /deep/.__bar-is-horizontal {
    // display: none !important;
    // }
    
    // 滚动条位置 --展示横向
    /deep/.__bar-is-vertical {
        display: none !important;
    }
    // 隐藏横向滚动条
    /deep/.__bar-is-horizontal {
        bottom: -1px !important;
    }
</style>
     

到了这里,关于vue+vant移动端显示table表格加横向滚动条的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue2+elementui的el-table固定列会遮住横向滚动条以及错位

    我是最右侧固定列,所以下面的class名称是 .el-table__fixed-right , 如果有左侧固定请自行替换为 el-table__fixed 防止固定列表格高度错位 如果还没有解决错位, 请看你的 el-table__body-wrapper 是不是自己写了 max-height 的样式属性, 这会影响固定列定位的 解决固定列错位后, 接下来就是

    2024年02月02日
    浏览(46)
  • Vue+element table+原生js +touch触摸事件实现移动端横向拖动

    Vue+element table+原生js +touch触摸事件实现移动端横向拖动 今天做移动端项目时,想加个表格展示数据,但是调试的时候发现,表格数据很多时,想要触屏左右滑动内容,但是滑动不了,又不想引用插件实现,只好自己写个拖拽事件了

    2024年02月17日
    浏览(44)
  • vue - vue简单实现移动端的table表格

    vue实现移动端的table表格,效果图如下: 主要实现功能: 1,表头字段可以进行正序倒序排序功能; 2,可以展开收起; 3,蓝色这一行是合计数据 需要单独出来进行渲染,否则排序的时候此行会排乱掉; 用到的模拟数据会放到最后面; 4,注意表头数据thList,title是标题,

    2024年02月16日
    浏览(41)
  • vue监听element-ui的table表格滚动事件

    这篇文章主要是讲述“如何监听element-ui table滚动事件”,按我自己尝试的方法去实现。 需求分析: 前两天做项目遇到一个问题,数据量大,然后表格渲染的很慢,而且很卡怎么办?有什么优化的方式? 那无非就是两种方法。 先加载一屏表格的数据,之后触底加载新的数据

    2024年02月12日
    浏览(57)
  • vue element table 懒加载 根据滚动条滑动动态加载数据 无分页或分页过大 渲染慢问题

    实现思路:先加载一开始会在页面上显示的数据,比如页面能显示20条数据,就先加载20条,剩下的数据监听滚动条,滚动条到底部再加载。 1.在data()中定义三个属性,分别存储数据指针、表格显示的数据和接口中获取的所有数据。 2.从接口获取数据,并添加最初20条到tableD

    2024年02月15日
    浏览(39)
  • vue | element-ui中 如何修改表格Table组件中滚动条的样式

    在Table表格中,当内容超出容器时就会出现滚动条,elemnt-ui自带的滚动条有时无法满足需求,那么我们可以通过css伪类来实现对滚动条的自定义。 滚动条由两部分组成的: 滑块:可以滑动的部分。 轨道:滚动条的轨道,即滑块的轨道。一般来说滑块的颜色比轨道的颜色深一

    2024年02月11日
    浏览(53)
  • element ui的table组件横向滚动条始终位于可视区域

    需求:表格行数过多,就需要先滚动到表格底部,才能使用横向滚动条,这给用户带来了不便。 思路:在表格内部生成一个自定义横向滚动条,当表格原生的横向滚动条没出现在可视区域范围时,将自定义滚动条调整到视口底部位置,反之隐藏该自定义滚动条。 使用:由于用的是V

    2024年02月11日
    浏览(40)
  • vue element ui table表格--实现列的显示与隐藏

    实现效果 提示:代码段太简单就不解释了,自己看代码自己更改,下面代码直接无脑复制更改就行

    2024年02月02日
    浏览(50)
  • 微信小程序原生实现无边框table组件支持横向和纵向滚动

    效果图(支持单元格样式自定义) table组件代码 wxml文件 wxss文件 js文件 组件使用 1、在page页面的json文件中引入组件(默认大家都会引入); 2、在page页面的wxml文件中使用组件 3、在page页面的js文件中设置数据 4、在page页面的wxss文件中修改样式

    2024年02月07日
    浏览(64)
  • IDEA中,光标移动快捷键(Shift + 滚轮前后滚动:当前文件的横向滚动轴滚动。)

    除此之外,其他常用的光标移动快捷键包括: Shift + 滚轮前后滚动:当前文件的横向滚动轴滚动 。 Shift+enter:快速将鼠标移动到下一行。 Ctrl + ]:移动光标到当前所在代码的花括号结束位置。 Ctrl + 左方向键:光标跳转到当前单词/中文句的左侧开头位置。 Ctrl + 右方向键:光

    2024年02月04日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包