vue+vant移动端显示table表格加横向滚动条效果
更新时间：2024年06月14日 11:11:26 作者：ss_Tina
vant移动端显示table效果,增加复选框,可以进行多选和全选,加横向滚动条,可以看全部内容,下面通过本文给大家分享vue+vant移动端显示table表格加横向滚动条效果,感兴趣的朋友跟随小编一起看看吧
vant移动端显示table效果，增加复选框，可以进行多选和全选。加横向滚动条，可以看全部内容。
主要是参考文末文章。
页面效果
代码
<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>参考文章：
https://blog.csdn.net/weixin_46511008/article/details/127210738
https://my.oschina.net/u/4261744/blog/3315859
到此这篇关于vue+vant移动端显示table表格加横向滚动条的文章就介绍到这了,更多相关vue vant移动端显示table表格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
capture事件修饰符的作用是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。这篇文章给大家介绍了Vue 事件修饰符capture 的使用，需要的朋友参考下吧2017-12-12
这篇文章主要介绍了Vue 中的受控与非受控组件的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要为大家详细介绍了如何利用Vue自定义实现一个消息通知组件,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下2024-03-03
本文主要介绍了vue2实现传送门效果的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了vue关于eslint空格缩进等的报错问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
vue v-for循环重复数据无法添加问题解决方法【加track-by=''索引''】
这篇文章主要介绍了vue v-for循环重复数据无法添加问题解决方法,结合实例形式分析了vue.js通过在v-for循环中添加track-by='索引'解决重复数据无法添加问题相关操作技巧,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了如何解决vue在ios微信"复制链接"功能问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
近期项目中大量使用async,从服务器获取数据,解决一些并发传参问题,代码很简单,在此也看了一些博客,现在async/await已经大范围让使用,所以本文给大家介绍一下vue使用async/await来实现同步和异步的案例,需要的朋友可以参考下2024-01-01
页面跳转有很多方法,本次使用的是 vue-router,但却在使用 router.push 的时候遇到了点麻烦,所以记录下来,希望可以帮助有需要的人2023-09-09
Vue轮播图组件的封装可通过封装组件、使用插件、配置化等方式实现，主要包括图片预加载、定时轮播、无限滚动、手势滑动、响应式布局等功能，实现方式可使用Vue的生命周期函数、自定义事件、计算属性等技术2023-04-04
最新评论