当前位置: 首页 > news >正文

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>

相关文章:

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

要在电脑端使用 fixed 固定列&#xff0c;而在移动端不使用&#xff0c;可以使用 CSS 媒体查询结合 Vue 的动态绑定来实现。以下是一个示例代码&#xff1a; <template><el-table><el-table-columnprop"name"label"Name":fixed"isDesk…...

RocketMQ 行业分享

5.0的架构发生了重大调整&#xff0c;添加了一层rocketmq-proxy,可以通过grpc的方式接入。 参考 https://juejin.cn/post/7199413150973984827...

物联网场景中的边缘计算解决方案有哪些?

在物联网场景中&#xff0c;边缘计算是一种重要的解决方案&#xff0c;用于在物联网设备和云端之间进行实时数据处理、分析和决策。HiWoo Box作为工业边缘网关设备&#xff0c;具备边缘计算能力&#xff0c;包括单点公式计算、Python脚本编程以及规则引擎&#xff0c;它为物联网…...

【C++ 进阶】学习导论:C/C++ 进阶学习路线、大纲与目标

目录 一、C 学习路线 二、C 课程大纲与学习目标 &#xff08;1&#xff09;第一阶段&#xff1a;C 语言基础 &#xff08;2&#xff09;第二阶段&#xff1a;C 高级编程 &#xff08;3&#xff09;第三阶段&#xff1a;C 核心编程与桌面应用开发 &#xff08;4&#xf…...

【数据结构】实验七:字符串

实验七 字符串实验报告 一、实验目的与要求 1&#xff09;巩固对串的理解&#xff1b; 2&#xff09;掌握串的基本操作实现&#xff1b; 3&#xff09;掌握 BF 和 KMP 算法思想。 二、实验内容 1. 给定一个字符串ababcabcdabcde和一个子串abcd,查找字串是否在主串中出现。…...

排序算法、

描述 由小到大输出成一行&#xff0c;每个数字后面跟一个空格。 输入 三个整数 输出 输入三个整数&#xff0c;按由小到大的顺序输出。 输入样例 1 2 3 1 输出样例 1 1 2 3 输入样例 2 4 5 2 输出样例 2 2 4 5 代码一&#xff08;如下&#xff09;&#xff1…...

rbd快照管理、rbd快照克隆原理与实现、rbd镜像开机自动挂载、ceph文件系统、对象存储、配置对象存储客户端、访问Dashboard

day04 day04快照快照克隆开机自动挂载ceph文件系统使用MDS对象存储配置服务器端配置客户端访问Dashborad 快照 快照可以保存某一时间点时的状态数据快照是映像在特定时间点的只读逻辑副本希望回到以前的一个状态&#xff0c;可以恢复快照使用镜像、快照综合示例 # 1. 在rbd存…...

vue、vuex、vue-router初学导航配合elementui及vscode快捷键

目录 一、vue资源 1.vue知识库汇总 2.vuejs组件 3.Vue.js 组件编码规范 目标 #目录 #基于模块开发...

Elasticsearch:使用 ELSER 释放语义搜索的力量:Elastic Learned Sparse EncoderR

问题陈述 在信息过载的时代&#xff0c;根据上下文含义和用户意图而不是精确的关键字匹配来查找相关搜索结果已成为一项重大挑战。 传统的搜索引擎通常无法理解用户查询的语义上下文&#xff0c;从而导致相关性较低的结果。 解决方案&#xff1a;ELSER Elastic 通过其检索模型…...

MySQL数据库分库分表备份(shell脚本)

创建目录 mkdir /server/scripts 一、使用脚本实现分库备份 1、创建脚本并编写 [rootlocalhost scripts]# vim bak_db_v1.sh #!/bin/bash ######################################### # File Name:bak_db_v1.sh # Version: V1.0 # Author:Shen QL # Email:17702390000163.co…...

建造者设计模式go实现尝试

文章目录 前言代码结果总结 前言 本文章尝试使用go实现“建造者”。 代码 package mainimport ("fmt" )// 产品1。可以有不同的毫无相关的产品&#xff0c;这里只举一个 type Product1 struct {parts []string }// 产品1逻辑。打印组成产品的部分 func (p *Product…...

创建交互式用户体验:探索JavaScript中的Prompt功能

使用JavaScript中的Prompt功能&#xff1a;创建交互式用户体验 在前端开发中&#xff0c;JavaScript的prompt()函数是一个强大而有用的工具&#xff0c;它可以创建交互式的用户体验。无论是接收用户输入、进行简单的验证还是实现高级的交互功能&#xff0c;prompt()函数都能胜…...

自然语言处理从入门到应用——LangChain:提示(Prompts)-[提示模板:基础知识]

分类目录&#xff1a;《自然语言处理从入门到应用》总目录 语言模型以文本作为输入&#xff0c;这段文本通常被称为提示&#xff08;Prompt&#xff09;。通常情况下&#xff0c;这不仅仅是一个硬编码的字符串&#xff0c;而是模板、示例和用户输入的组合。LangChain提供了多个…...

OpenPCDet调试出现的问题

Open3d遇到的问题&#xff0c;解决方案 1.ModuleNotFoundError: No module named ‘pcdet’ 原因&#xff1a;没有编译安装pcdet。 解决&#xff1a;进入openpcdet项目根目录&#xff0c;修改setup.py权限&#xff0c;并编译&#xff1a; sudo chmod 777 setup.py python set…...

【业务功能篇58】Springboot + Spring Security 权限管理 【下篇】

4.2.2.3 SpringSecurity工作流程分析 SpringSecurity的原理其实就是一个过滤器链&#xff0c;内部包含了提供各种功能的过滤器。这里我们可以看看入门案例中的过滤器。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KjoRRost-1690534711077)(http…...

VBA技术资料MF34:检查Excel自动筛选是否打开

【分享成果&#xff0c;随喜正能量】聪明人&#xff0c;抬人不抬杠&#xff1b;傻子&#xff0c;抬杠不抬人。聪明人&#xff0c;把别人抬得很高&#xff0c;别人高兴、舒服了&#xff0c;看你顺眼了&#xff0c;自然就愿意帮你&#xff01;而傻人呢&#xff1f;不分青红皂白&a…...

spring扩展点

在Spring框架中&#xff0c;有多个扩展点&#xff08;Extension Point&#xff09;可用于自定义和扩展应用程序的行为。这些扩展点允许开发人员介入Spring的生命周期和行为&#xff0c;并提供了灵活性和可定制性。以下是一些常见的Spring扩展点&#xff1a; BeanPostProcessor&…...

Skin Shader 使用自动生成的Thickness

Unity2023.2的版本&#xff0c;Thickness 自动化生成&#xff0c;今天测试了一把&#xff0c;确实不错。 1.Render 设置 在Project Settings->Graphics->HDRP Global Settings中 Frame Setting->Rendering->Compute Thickness 打开 2.Layer设置 2.1添加Layer&…...

Docker中的网络

文章目录 网络网桥&#xff08;bridge&#xff09;创建网桥接口hostnonecontaineroverlayoverlay底层原理 网络 网桥&#xff08;bridge&#xff09; 在Docker中&#xff0c;网桥&#xff08;Bridge&#xff09;是一种网络驱动&#xff0c;用于实现Docker容器之间和容器与宿主…...

SRS开源代码框架,协程库state-threads的使用

本章内容解读SRS开源代码框架&#xff0c;无二次开发&#xff0c;以学习交流为目的。 SRS是国人开发的流媒体服务器&#xff0c;C语言开发&#xff0c;本章使用版本&#xff1a;https://github.com/ossrs/srs/tree/5.0release。 目录 SRS协程库ST的使用源码ST协程库测试SrsAut…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...