Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >通过页面配置兼容手机端的表格实现

通过页面配置兼容手机端的表格实现

作者头像
编程思维
修改于 2023-08-21 06:08:46
修改于 2023-08-21 06:08:46
44101
代码可运行
举报
运行总次数:1
代码可运行

数据表格兼容移动端

电脑上开发的表格

可以使用table或是类似的组件实现

但是往往不适用移动端的屏幕

一来,电脑是横的,手机是竖的

而且数据量摆在那里,看起来不舒服

改造

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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>

以上代码在手机环境

就可以很好的适应了

不会让访问者觉得繁琐

觉得有用可以经常看看我的文章

让我们共同进步

不断成长

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Vue + Element UI 实现权限管理系统 前端篇(四):优化登录流程
1.1 从 Element 指南中选择组件模板丰富登录界面,放置一个登录界面表单,包含账号密码输入框和登录重置按钮。
朝雨忆轻尘
2019/06/18
2.1K0
vuedraggable自由拖拽_vue可视化拖拽编辑
最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入
全栈程序员站长
2022/09/20
2.1K0
移动端input输入历史建议
基于vant输入历史记录源码 historyInput.gif 使用 <template> <div class="hello"> <historyInput label="备注:" pl
程序员不务正业
2019/09/27
8580
vue2.0+Element-ui实战案例
我们将会选择使用一些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui搭建一个前端项目案例,后端数据接口,会使用json-server快速搭建一个本地的服务,方便对数据的增删改查,
小周sir
2019/09/23
2.4K0
vue2.0+Element-ui实战案例
mpvue——引入vant_weapp组件
克隆后,将dist目录下的所有文件复制到项目中的/static/vant/目录下,vant目录是我自己创建为了区分的
思索
2024/08/16
870
mpvue——引入vant_weapp组件
使用Vue.js和Element-UI做一个简单的登录页面
最近了解到Vue.js挺火的,有同学已经学习了,那我心里痒痒的也学习了一点,然后也学了一点Element组件,就做了简单的登录页面。
业余草
2019/01/21
4.7K0
使用Vue.js和Element-UI做一个简单的登录页面
学生管理系统Element UI版
链接:https://pan.baidu.com/s/1FAb2WUSUwpRuwIB9Spy3oQ  提取码:1234
陶然同学
2023/02/24
1.6K0
学生管理系统Element UI版
TienChin-课程管理-展示课程列表
程序员NEO
2023/10/12
2750
TienChin-课程管理-展示课程列表
Element UI 快速入门指南
Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。它提供了一系列开箱即用的组件,帮助我们快速构建用户界面。本文将详细介绍如何快速入门 Element UI,并通过一些实例来展示其强大功能。
九转成圣
2024/06/09
6540
写表单你还在复制粘贴吗?推荐你使用基于Vant-UI二次封装的数据驱动式表单自动生成组件
在使用Vue写移动端开发的时候,难免会遇到需要写很多的表单,所以我在现在的项目里面集成了有赞的Vant-ui组件库,但是感觉Vant-ui对于表单组件的调用方式有点繁琐,实在不愿意去干这么一样的事情,就封装了一个基于Vant-ui的数据驱动式表单自动生成组件。
吴佳
2022/09/26
2.1K0
ElementUI Form 表单
Form 表单由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据
py3study
2021/01/06
2.8K0
ElementUI Form 表单
Vue使用Element实现增删改查+打包
在我们进行项目开发期间,避免不了使用各式各样的组件,Element是由饿了么公司前端团队开源。样式精美、组件齐全、易于上手。
憧憬博客
2020/07/20
2.2K0
4. 许愿墙后台管理系统(前端页面)
许愿墙的后台管理系统主要有4个模块:登录模块、首页模块、许愿管理模块和管理员管理模块。使用前后端分离方式,后端接口使用Express框架,前端使用Vue框架,页面使用Element组件。这节实现前端页面。
爱学习的程序媛
2022/04/07
9980
4. 许愿墙后台管理系统(前端页面)
10.寻光集后台管理系统-用户管理(登录页面)
把img/logo.png这个图片换一下就可以了,具体路径在frontend/public/img/logo.png
zx钟
2022/12/02
1.2K0
10.寻光集后台管理系统-用户管理(登录页面)
vue+vant制作登录登出个人页面
GeekLiHua
2025/01/21
2240
vue+vant制作登录登出个人页面
Vue实现复制excel表格内容粘贴至网页
要求复制excel表格内容粘贴至网页表格,并且自动生成格式,不要问为什么不使用导入excel,我也不知道客户为什么不用
程序员不务正业
2020/07/24
3.2K0
【Vue.js——Bug解决】凭空消失的TA(蓝桥杯真题-2320)【合集】
选中 index.html 右键启动 Web Server 服务(Open with Live Server),让项目运行起来。
Rossy Yan
2025/01/27
2080
【Vue.js——Bug解决】凭空消失的TA(蓝桥杯真题-2320)【合集】
vue+vant制作一个做题页面(包含选择题,判断题,填空题,简答题)
本文讲解如何结合vue+vant制作一个做题页面里面包含选择题,判断题,填空题,简答题,还包含计算成绩的功能。
GeekLiHua
2025/01/21
2100
vue+vant制作一个做题页面(包含选择题,判断题,填空题,简答题)
补档 后端开发日常:国家电网CMS系统
在我上一个 WordPress 博客中写过,后来这个服务器拿去做 Springboot 测试之后数据库就炸了,然后也没备份,文章就全没了。所以这是一期补档!
DioxideCN
2022/08/05
9700
补档 后端开发日常:国家电网CMS系统
9. 前后台协议联调
(2)后台返回操作结果,将 Dao 层的增删改方法返回值从void​ 改成int​
捞月亮的小北
2023/12/01
2640
9. 前后台协议联调
相关推荐
Vue + Element UI 实现权限管理系统 前端篇(四):优化登录流程
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验