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

参考文章：

https://blog.csdn.net/weixin_46511008/article/details/127210738

https://my.oschina.net/u/4261744/blog/3315859

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

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

页面效果

代码

    
        
            
        
        
        
                
                  
                    搜索
                 
                
          
        
        
        
            
                
                    
                        
                            全选
                        
                    
                    编号
                    姓名
                    工资
                    保额
                    时间
                    备注
                
                
                
                
                    
                
                        
                
                            
                            
                        
                        {{item.workerNo}}
                        {{item.workerName}}
                        {{item.salary}}
                        {{item.amount}}
                        {{item.amountTime |dateFormat}}
                        {{item.remark}}

                    
                
            
        
        
        
        
          {{ ellContent }}
        
  
    
     
    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(){

        },

      },
    };
 
     

     
     .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;
    }