el-table组件的el-table-column电脑端使用fixed属性固定,移动端不使用固定,怎么实现?

       要在电脑端使用 fixed 固定列,而在移动端不使用,可以使用 CSS 媒体查询结合 Vue 的动态绑定来实现。以下是一个示例代码:

<template><el-table><el-table-columnprop="name"label="Name":fixed="isDesktop ? '' : 'true'"></el-table-column><el-table-columnprop="age"label="Age"></el-table-column><!-- 其他列 --></el-table>
</template><script>
export default {data() {return {isDesktop: false};},beforeDestroy() {window.removeEventListener('resize', this.checkDeviceType);},mounted() {this.checkDeviceType();window.addEventListener('resize', this.checkDeviceType);},methods: {checkDeviceType() {this.isDesktop = window.innerWidth >= 768; // 设置阈值,这里假设大于等于 768px 的宽度为电脑端}}
};
</script>

       在上面的示例中,我们使用 isDesktop 数据属性来判断当前设备是否为电脑端。通过监听窗口的 resize 事件,动态更新 isDesktop 的值。然后,在 el-table-column 的 fixed 属性上,我们使用了动态绑定的方式来根据 isDesktop 的值设置 fixed 属性。

       这样,在电脑端时,isDesktop 为 true,fixed 属性为 'true'(可设置true, left, right),列将被固定;而在移动端时,isDesktop 为 false,fixed 属性为空,列将不被固定。

问题:电脑端正常固定显示,手机端这两列字段不显示了

方法解决:不清楚什么原因造成的,写个笨方法

<template><el-table><el-table-columnprop="name"label="Name":fixed="isDesktop ? '' : 'true'"></el-table-column>// 重复写一遍列字段,在手机端时显示<el-table-columnv-if="!isDesktop"prop="name"label="Name"></el-table-column><el-table-columnprop="age"label="Age"></el-table-column><!-- 其他列 --></el-table>
</template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/13420.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JPA连接达梦数据库导致auto-ddl失效问题解决

现象&#xff1a; 项目使用了JPA&#xff0c;并且auto-ddl设置的为update&#xff0c;在连接达梦数据库的时候&#xff0c;第一次启动没有问题&#xff0c;但是后面重启就会报错&#xff0c;发现错误为重复建表&#xff0c;也就是说已经建好的表没有检测到&#xff0c;…

title: 用 LangChain 构建基于资料库的问答机器人(四):通过代理使用外部工具

上一篇教程我们介绍了 ReAct 系统&#xff0c;这是一个非常强大的行为模式&#xff0c;但它需要编写大量的示例来告诉 LLM 如何思考、行动&#xff0c;并且为了遵循这个模式&#xff0c;还需要编写代码来分析生成文字、调用函数、拼接 prompt 等&#xff0c;这些工作都是十分繁…

JVM类加载

一、类记载过程 1、通过类的全限定名获取存储该类的class文件 2、解析成运行时数据&#xff0c;即instanceKlass实例&#xff0c;存放到方法区 3、在堆区生成该类的class对象,即instanceMirrorKlass实例 二、将.class文件解析成什么&#xff1f;类的元信息在JVM中如何…

ceph集群中RBD的性能测试、性能调优

文章目录 rados benchrbd bench-write测试工具Fio测试ceph rbd块设备的iops性能测试ceph rbd块设备的带宽测试ceph rbd块设备的延迟 性能调优 rados bench 参考&#xff1a;https://blog.csdn.net/Micha_Lu/article/details/126490260 rados bench为ceph自带的基准测试工具&am…

全加器(多位)的实现

一&#xff0c;半加器 定义 半加器&#xff08;Half Adder&#xff09;是一种用于执行二进制数相加的简单逻辑电路。它可以将两个输入位的和&#xff08;Sum&#xff09;和进位&#xff08;Carry&#xff09;计算出来。 半加器有两个输入&#xff1a;A 和 B&#xff0c;分别代表…

MySQL基础扎实——MySQL中有那些不同的表格

表格类型 在MySQL中&#xff0c;常见的表格类型有以下几种&#xff1a; MyISAM&#xff1a;是MySQL默认的表格类型&#xff0c;具有较高的性能和较小的存储空间占用。但是&#xff0c;MyISAM不支持事务、崩溃恢复和数据行级锁定。 InnoDB&#xff1a;是MySQL提供的一个更强大…

Redis实现分布式锁

文章目录 4、分布式锁4.1 、基本原理和实现方式对比4.2 、Redis分布式锁的实现核心思路4.3 实现分布式锁版本一4.4 Redis分布式锁误删情况说明4.5 解决Redis分布式锁误删问题4.6 分布式锁的原子性问题4.7 Lua脚本解决多条命令原子性问题4.8 利用Java代码调用Lua脚本改造分布式锁…

MySQL | 常用命令示例

MySQL | 常用命令示例 一、启停MySQL数据库服务二、连接MySQL数据库三、创建和管理数据库四、创建和管理数据表五、数据备份和恢复六、查询与优化 MySQL是一款常用的关系型数据库管理系统&#xff0c;广泛应用于各个领域。在使用MySQL时&#xff0c;我们经常需要编写一些常用脚…

python多线程—终止子线程

总体思路 1、获取需要终止的子线程id 2、根据子线程id&#xff0c;终止子线程。 过程 获取子线程id&#xff1a; import threading Thread_id threading.get_ident() # 获取子线程的id值线程终止函数 def async_raise(Thread_id, exctype):"""raises th…

【数据结构】【王道408】——PPT截图与思维导图

自用视频PPT截图 视频网址王道B站链接 23考研 408新增考点&#xff1a; 并查集&#xff0c;红黑树 2023年408真题数据结构篇 408考纲解读 考纲变化 目录 第一章 绪论第二章 线性表顺序表单链表双链表循环链表静态链表差别 第三章 栈 队列 数组栈队列栈的应用数组 第四章 串第五…

软考A计划-系统集成项目管理工程师-项目质量管理-中

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff…

【单链表OJ题:删除链表中等于给定值 val 的所有节点】

1.删除链表中等于给定值 val 的所有节点 题目来源 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 /*** Definition for singly-linked list.* struct ListNode {* int val;* s…

小程序UV:衡量用户规模与活跃度的重要指标

什么是UV UV是Unique Visitor&#xff08;独立访客&#xff09;的缩写&#xff0c;指的是在特定时间段内访问某个网站、应用或平台的独立用户数量。UV是根据设备、IP地址、Cookie等来识别不同的用户&#xff0c;对于相同的用户多次访问&#xff0c;只计算为一个UV。UV是衡量网…

c#栈应用之实现四则运算

前言&#xff1a;四则运算&#xff0c;大家都不陌生&#xff0c;在上小学的时候&#xff0c;数学中学到过的知识&#xff0c;那么如何在程序中实现呢&#xff1f;下面&#xff0c;我们就用程序来实现9(3-2)*(5-3)/4*3&#xff0c;这个算式的值。计算的时候&#xff0c;有一个规…

流数据湖平台Apache Paimon(一)概述

文章目录 第1章 概述1.1 简介1.2 核心特性1.3 基本概念1.3.1 Snapshot1.3.2 Partition1.3.3 Bucket1.3.4 Consistency Guarantees一致性保证 1.4 文件布局1.4.1 Snapshot Files1.4.2 Manifest Files1.4.3 Data Files1.4.4 LSM Trees 第1章 概述 1.1 简介 Flink 社区希望能够将…

RocketMQ重复消费的解决方案::分布式锁直击面试!

文章目录 场景分析方法的幂等分布式锁Redis实现分布式锁抢锁的设计思路 分布式锁案例 直击面试rocketmq什么时候重复消费消息丢失的问题消息在哪里丢失发送端确保发送成功并且配合失败的业务处理消费端确保消息不丢失rocketmq 主从同步刷盘 场景分析 分布式系统架构中,队列是分…

css实现有缺口的border

css实现有缺口的border 1.问题回溯2.css实现有缺口的border 1.问题回溯 通常会有那种两个div都有border重叠在一起就会有种加粗的效果。 div1,div2,div3都有个1px的border&#xff0c;箭头标记的地方是没有处理解决的&#xff0c;很明显看着是有加粗效果的。其实这种感觉把di…

【Java从入门到大牛】集合进阶上篇

&#x1f525; 本文由 程序喵正在路上 原创&#xff0c;CSDN首发&#xff01; &#x1f496; 系列专栏&#xff1a;Java从入门到大牛 &#x1f320; 首发时间&#xff1a;2023年7月29日 &#x1f98b; 欢迎关注&#x1f5b1;点赞&#x1f44d;收藏&#x1f31f;留言&#x1f43…

IntelliJ IDEA流行的构建工具——Gradle

IntelliJ IDEA&#xff0c;是java编程语言开发的集成环境。IntelliJ在业界被公认为最好的java开发工具&#xff0c;尤其在智能代码助手、代码自动提示、重构、JavaEE支持、各类版本工具(git、svn等)、JUnit、CVS整合、代码分析、 创新的GUI设计等方面的功能可以说是超常的。 如…

基于java SpringBoot和HTML的博客系统

随着网络技术渗透到社会生活的各个方面&#xff0c;传统的交流方式也面临着变化。互联网是一个非常重要的方向。基于Web技术的网络考试系统可以在全球范围内使用互联网&#xff0c;可以在本地或异地进行通信&#xff0c;大大提高了通信和交换的灵活性。在当今高速发展的互联网时…