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