数据表格兼容移动端
电脑上开发的表格
可以使用table或是类似的组件实现
但是往往不适用移动端的屏幕
一来，电脑是横的，手机是竖的
而且数据量摆在那里，看起来不舒服
改造
代码语言：javascript复制<!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-06-05</div>
</el-col>
<el-col :span="12">
<div class="title">手机号</div>
<div class="info">18933334444</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">法规2科</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-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(() => {});
}
},
// 编辑
edit() {
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>以上代码在手机环境
就可以很好的适应了
不会让访问者觉得繁琐
觉得有用可以经常看看我的文章
让我们共同进步
不断成长
