前言
上次做了一个移动端的表格功能，纯表格的那种。
跟PC一样，但是我一直觉得在移动端上写表格很糟糕的体验，毕竟手机就那么大。这不合理。
但是我这公司又需要把PC端的表格的数据展示在移动端。
导致我只能去试试看怎么排版比较好。由于网上也是一直找不到什么案例参考，所以就自己想了一个排版供大家参考。
如果各位有更好的排版方式请发我一个图学习一下
效果图
手机上截图的页面
视频演示
vant2把表格PC端表格数据展示在手机端。页面排班参考
如果需要纯表格的去这里
上面纯表格的效果图
代码
这里代码直接发出来了，大家复制需要的
我这里没有接口的，纯前端的代码。可以直接复制了改改。
数据都是模拟的，所以数据需要自行替换
说一下，这里我用到了一些elementul的组件解决的无限滚动的问题。
这个class=“infinite-list” 的div是elementul中的。下拉刷新是vant的。
所以各位需要先引用好才可以使用，或者你们参考这个自己用熟悉的组件写也行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 移动端缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<!-- vue方面文件 -->
<script src="/statics/vue_element/vue.js"></script>
<script src="/statics/vue_element/element.js"></script>
<link rel="stylesheet" href="/statics/vue_element/element.css">
<script src="/statics/vue_element/axios.js"></script>
<!-- 企业微信部分 -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
<!-- vant -->
<link rel="stylesheet" href="/statics/css/vant.css" />
<script src="/statics/js/vant.js"></script>
<title>私信录入</title>
</head>
<body>
<div id="app">
<div>
<van-nav-bar title="私信录入" left-text="返回" left-arrow @click-left="onClickLeft" right-text="新增"
@click-right="onClickRight" />
</div>
<div style="padding:5px;">
<div class="infinite-list" v-infinite-scroll="load" style="overflow:auto;height: 93vh;" :infinite-scroll-distance="10">
<!-- 下拉刷新组件 -->
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<el-card class="box" v-for="item,index in list" :key="index">
<div style="font-size:14px;font-weight:bold;display:flex;">
<span>张无忌{
{
index}}</span>
<!-- 编辑和删除 -->
<span style="text-align:right;flex: 1;">
<van-popover v-model="item.showPopover" theme="dark" trigger="click" :actions="actions"
@select="setUp">
<template #reference>
<van-icon name="arrow-down" style="cursor:pointer;" />
</template>
</van-popover>
</span>
</div>
<el-row>
<el-col :span="12">
<div class="title">日期</div>
<div class="info">2023-07-05</div>
</el-col>
<el-col :span="12">
<div class="title">手机号</div>
<div class="info">13088885555</div>
</el-col>
<el-col :span="12">
<div class="title">科室</div>
<div class="info">中医科</div>
</el-col>
<el-col :span="12">
<div class="title">二级科室</div>
<div class="info">中医男科</div>
</el-col>
<el-col :span="12">
<div class="title">录入人</div>
<div class="info">李四</div>
</el-col>
<el-col :span="12">
<div class="title">推粉备注</div>
<div class="info">硬度和尺寸问题</div>
</el-col>
<el-col :span="12">
<div class="title">分配客服</div>
<div class="info">张三</div>
</el-col>
<el-col :span="12">
<div class="title">是否加V</div>
<div class="info">否</div>
</el-col>
</el-row>
</el-card>
</van-pull-refresh>
</div>
</div>
<!-- 录入弹框 -->
<van-dialog v-model="show" title="标题" show-cancel-button @confirm="enterSxInfo">
<div style="height:50vh;overflow: auto;">
<van-form>
<van-field readonly clickable name="picker" :value="value" label="科室" placeholder="点击选择科室"
@click="showPicker = true" />
</van-form>
<van-form>
<van-field readonly clickable name="picker" :value="value" label="二级科室" placeholder="点击选择二级科室"
@click="showPicker = true" />
</van-form>
<van-form>
<van-field v-model="phone" name="手机号" label="手机号" placeholder="请填写手机号" />
</van-form>
<van-form>
<van-field v-model="wexin" name="微信" label="微信" placeholder="请填写微信" />
</van-form>
<van-form>
<van-field v-model="tuifen" name="推粉备注信息" label="推粉备注信息" placeholder="请填写推粉备注信息" rows="3"
autosize />
</van-form>
<van-form>
<van-field name="uploader" label="图片上传">
<template #input>
<van-uploader v-model="uploader" />
</template>
</van-field>
</van-form>
</div>
</van-dialog>
<van-popup v-model="showPicker" position="bottom">
<van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
</van-popup>
</div>
</body>
<script type="text/javascript">
let v = new Vue({
el: '#app',
data() {
return {
show: false,
value: '',
columns: ['男科', '妇科', '中医科', '外科', '泌尿外科'],
showPicker: false,
phone: '',
wexin: '',
tuifen: '',
uploader: [],
currentPage: 0,
showPopover: false,
actions: [{
text: '编辑'
}, {
text: '删除'
}],
isLoading: false,
list: [{
showPopover: false,
},
{
showPopover: false,
},
{
showPopover: false,
},
{
showPopover: false,
},
{
showPopover: false,
}
]
}
},
mounted() {
},
methods: {
// 无限滚动
load() {
let obj = {
showPopover: false,
}
console.log('load');
this.list.push(obj)
},
// 下拉刷新
onRefresh() {
let that = this
setTimeout(() => {
vant.Toast('刷新成功');
that.isLoading = false;
}, 1000);
},
// 设置
setUp(action, index) {
console.log(action.text, 'action');
if (action.text == '编辑') {
this.show = true
}
if (action.text == '删除') {
vant.Dialog.confirm({
message: '此操作将会删除该条数据，是否继续操作',
})
.then(() => {
vant.Notify({
type: 'success',
message: '删除成功！'
});
})
.catch(() => {
});
}
},
// 私信录入
enterSxInfo() {
console.log(this.uploader);
},
// 科室选择
onConfirm(value) {
this.value = value;
this.showPicker = false;
},
// 返回
onClickLeft() {
window.history.back()
},
// 新增
onClickRight() {
console.log('add');
this.show = true
}
}
})
</script>
<style scoped>
html,
body {
height: 100%;
}
#app {
height: 100vh;
background-color: #f1f1f1;
position: relative;
}
.van-popover__action {
width: 100% !important;
}
.box {
margin-bottom: 5px;
}
.title {
font-size: 12px;
color: #A4A4A4;
margin: 5px 0;
}
.info {
font-size: 14px;
}
</style>
</html>