当前位置: 首页 > 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>

http://www.lryc.cn/news/99148.html

相关文章:

  • RocketMQ 行业分享
  • 物联网场景中的边缘计算解决方案有哪些?
  • 【C++ 进阶】学习导论:C/C++ 进阶学习路线、大纲与目标
  • 【数据结构】实验七:字符串
  • 排序算法、
  • rbd快照管理、rbd快照克隆原理与实现、rbd镜像开机自动挂载、ceph文件系统、对象存储、配置对象存储客户端、访问Dashboard
  • vue、vuex、vue-router初学导航配合elementui及vscode快捷键
  • Elasticsearch:使用 ELSER 释放语义搜索的力量:Elastic Learned Sparse EncoderR
  • MySQL数据库分库分表备份(shell脚本)
  • 建造者设计模式go实现尝试
  • 创建交互式用户体验:探索JavaScript中的Prompt功能
  • 自然语言处理从入门到应用——LangChain:提示(Prompts)-[提示模板:基础知识]
  • OpenPCDet调试出现的问题
  • 【业务功能篇58】Springboot + Spring Security 权限管理 【下篇】
  • VBA技术资料MF34:检查Excel自动筛选是否打开
  • spring扩展点
  • Skin Shader 使用自动生成的Thickness
  • Docker中的网络
  • SRS开源代码框架,协程库state-threads的使用
  • 【QT 网络云盘客户端】——登录界面功能的实现
  • 【复盘与分享】第十一届泰迪杯B题:产品订单的数据分析与需求预测
  • X - Transformer
  • ubuntu下畅玩Seer(via wine)
  • 第五章:Spring下
  • 在CSDN学Golang云原生(Kubernetes基础)
  • 给APK签名—两种方式(flutter android 安装包)
  • 观察者模式、中介者模式和发布订阅模式
  • PHP-Mysql图书管理系统--【白嫖项目】
  • 网络传输层协议:UDP和TCP
  • ElementUI Select选择器如何根据value值显示对应的label