elementUI-el-table组件使用总结

news/2024/3/29 17:36:37/文章来源:https://blog.csdn.net/qq_49172635/article/details/130290067

一、背景

vue2项目中用到el-table这个组件,但基础的功能不够用,所以需要自定义

二、表头自定义

比如要让表头展现出下面的形式:

 只需使用 slot="header" slot-scope="scope" 对插槽进行定义,并绑定变量

<el-table>    <el-table-column><template slot="header" slot-scope="scope"><el-inputv-model="search"placeholder="输入关键字搜索"/></template></el-table-column>
</el-table>data() {return {search: ''}
},

三、表格内容自定义

有时除了对表头要做定制外,对表格内容也需要做定制,比如按照表格值是0or1来显示不同的内容等。

3.1对表格数据做二次处理

一个经典例子就是时间戳格式的转换(后端传回来的数据往往不是xxxx-xx-xx这种形式)。

只需给 el-table-column 的 formatter 属性绑定一个自己写的函数即可,比如下面这样:

<el-table-column prop="Start" :formatter="dateFormat"  label="开始时间"></el-table-column>
dateFormat(row, column) {const date = row[column.property]if (date === null || date === undefined) {return '<null>'}return date
},

3.2改变表格内容的展示形式

只需在列标签内部定义 slot-scope="scope"这个插槽然后写入自定义内容即可

<el-table :data="tableData" border stripe style="width: 100%"><el-table-column prop="name" label="类名" width="180"></el-table-column><el-table-column prop="icon" label="图标" width="180"><template slot-scope="scope"><i :class="scope.row.icon"></i></template></el-table-column>
</el-table><script>
export default {data() {return {tableData: [{name: '图标1',icon: 'fa fa-camera-retro',},{name: '图标2',icon: 'fa fa-camera-retro2',},]}}
}
</script>

上述代码效果如下:

 3.3内容中插入图片

和3.2的做法类似,不过这里需要注意要使用 :src 这种写法(绑定变量而非字符串)

<el-table-column prop="img" label="图片"><template v-slot="scope"><img :src="scope.row.img" width="90" height="90"></template>
</el-table-column>data() {return {imgs: [{img: require('@/assets/images/views/login-logo1.png') },{img: require('@/assets/images/views/login-logo2.png') }, {img: require('@/assets/images/views/login-logo3.png') },]}
}

3.4根据单元格的值来展示不同的内容

比如需要根据用户状态来显示“已启用”或“已禁用”按钮。

思路:在插槽中使用v-if来进行条件判断

<el-table-column label="是否启用" prop="user_status" width="100"><template slot-scope="scope"><div><el-button v-if="scope.row.user_status == 1">已启用</el-button><el-button v-else>已禁用</el-button></div></template>
</el-table-column>

效果如下:

 

 

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

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

相关文章

CPU Cache:访问存储速度是如何大幅提升的?

我们了解到不同的物理器件&#xff0c;它们的访问速度是不一样的&#xff1a;速度快的往往代价高、容量小&#xff1b;代价低且容量大的&#xff0c;速度通常比较慢。为了充分发挥各种器件的优点&#xff0c;计算机存储数据的物理器件不会只选择一种&#xff0c;而是以 CPU 为核…

java的validation框架(参数校验)

一.bean validation和hibernate validator参数校验常用约束注解&#xff1a; 空值校验类&#xff1a;Null&#xff0c;NotNull&#xff0c;NotEmpty&#xff0c;NotBlank等 范围校验类&#xff1a;Min&#xff0c;Size&#xff0c;Digits&#xff0c;Future&#xff0c;Negati…

微信小程序自定义搜索标题栏

一&#xff1a;需求 把微信小程序标题栏处变成搜索栏。自定义返回上级页面。 二&#xff1a;需求分析 首先要把小程序标题栏设置为可自定义。然后计算原标题栏的高度组成结构。根据计算高度设置搜索框和返回按钮的布局。最后进行代码功能实现。 三&#xff1a;功能实现 1&…

4月19号软件更新资讯合集....

JavaWeb 微服务前后端分离 EurekaEleVue 版 v1.5.0 发布 v1.5.0 更新如下&#xff1a; 1、解决 token 过期无法跳转至登录页的问题&#xff1b; 2、授权服务进行重构与优化&#xff1b; 一款 Java 语言基于 SpringCloud、SpringSecurity、OAuth2、Eureka、Vue、ElementUI、…

Go Fuzzing:发现你未曾发现的漏洞

文章目录 Fuzzing(模糊测试)要求示例模拟crash 总结参考资料 Fuzzing(模糊测试) go fuzz文档 对于软件开发者而言&#xff0c;一项重要的任务就是确保程序的安全性。而其中一种风险就是软件中可能存在的漏洞。传统的测试方法往往需要耗费大量的时间和人力&#xff0c;而使用F…

4月21号软件更新资讯合集.....

PlayEdu v1.0-beta.3 发布&#xff0c;视频培训解决方案 PlayEdu 是基于 SpringBoot3 Java17 React18 开发的企业内部培训系统。它专注于提供私有化部署方案&#xff0c;包括视频&#xff0c;图片等资源的内网部署。目前主要支持有本地视频上传播放、学员邮箱登录、无限级部门…

多数据源 使用 mybatis-plus-generator 3.5.1版本进行代码生成

文章目录 前言多数据源 使用 mybatis-plus-generator 3.5.1版本进行代码生成1. 说明2. 添加依赖2.1. mybatis-plus-generator 自动生成依赖2.2. 多数据源依赖2.3. 建立新项目的完全pom.xml 3. application.yml 多数据源配置 mybatis-plus-generator配置4. 创建一个MybatisPlus…

多通道振弦传感器无线采集仪 数字传感器起始通道分配

多通道振弦传感器无线采集仪 数字传感器起始通道分配 寄存器 DS_CHNUM(299)用于设置读取到的数字传感器数据从哪个通道开始占用&#xff0c;默认为 1。 单个数字传感器占用的通道数量与具体的传感器类型有关&#xff0c;例如&#xff1a;每个激光测距仪会占用 1 个通道&#xf…

Python爬虫之MongoDB

目录 一、Mongo概述 二、安装&下载 1.下载&#xff1a; 2.安装 三、基本命令 插⼊数据 查询数据 修改数据 删除数据 索引 四、Python与MongoDB交互 1.安装pymongo 2.使⽤ 一、Mongo概述 MongoDB是什么&#xff1f; MongoDB是⾮关系型数据库(No sql) 为啥需要…

基于C#asp.net心里咨询服务网站系统

功能模块&#xff1a; 主要分为管理员和注册用户&#xff0c;注册用户可以查看所有人发布的心里文章&#xff0c;情感在线问答&#xff0c;查询相似问题&#xff0c;以及进入论坛进行交流&#xff08;发帖跟帖评论收藏等&#xff09;后台管理主要是针对个人信息修改 管理员对注…

商品价格监控业务场景,API数据分析

商品价格监控指的是对特定商品价格进行实时监控和跟踪&#xff0c;及时更新最新价格并分析价格变化的行为。这种监控可以帮助企业及时了解市场行情&#xff0c;并根据价格变化情况做出相应的调整&#xff0c;以更好地应对市场变化。 一般来说&#xff0c;商品价格监控需要以下…

KVM虚拟机的磁盘无损扩容方法-qcow2格式的

起因&#xff1a;我的KVM主机上安装了基于Debian11的 虚拟机母鸡&#xff0c;其他虚拟机都由此克隆而来。因为最初只配置了8G的虚拟硬盘&#xff0c;因此在需要占用比较大的空间的应用时&#xff0c;就比较麻烦。度娘等中文搜索结果没找到答案&#xff0c;只能google了。 这里…

JavaScript概述四(DOM文档对象模型)

1.DOM(Document Object Model) 会把网页里面的元素当成对象去操作,包含对象的属性,属性值,方便我们去 操作网页。 整个页面最终会形成一个对象 :document ,页面里面的所有的元素(如 标签 ) 最终都会转换成 js 里面的对象。 1.1 获取页面的元素&#xff08;通过选择器&#xff0…

JS-11A/224时间继电器 JOSEF约瑟 板前、板后接线

系列型号&#xff1a; JS-11A/11集成电路时间继电器&#xff1b;JS-11A/12集成电路时间继电器&#xff1b; JS-11A/13集成电路时间继电器&#xff1b;JS-11A/136集成电路时间继电器&#xff1b; JS-11A/137集成电路时间继电器&#xff1b;JS-11A/22集成电路时间继电器&#…

数据结构与算法(三):数论(树形结构、二叉树、二叉搜索树、红黑树、Btree、B+Tree、赫夫曼树、堆树)

数论&#xff08;树形结构、二叉树、二叉搜索树、红黑树、Btree、BTree、赫夫曼树、堆树&#xff09; 树形结构概念 在树形结构里面重要的术语&#xff1a; 结点&#xff1a;树里面的元素。 父子关系&#xff1a;结点之间相连的边 子树&#xff1a;当结点大于1时&#xff0…

华为OD机试真题(Java),数字涂色(100%通过+复盘思路)

一、题目描述 疫情过后&#xff0c;希望小学终于又重新开学了&#xff0c;三年二班开学第一天的任务是将后面的黑板报重新制作。 黑板上已经写上了N个正整数&#xff0c;同学们需要给这每个数分别上一种颜色。 为了让黑板报既美观又有学习意义&#xff0c;老师要求同种颜色的…

LoadRunner参数化最佳实践:让你的性能测试更加出色!

距离上次使用loadrunnr 已经有一年多的时间了。初做测试时在项目中用过&#xff0c;后面项目中用不到&#xff0c;自己把重点放在了工具之外的东西上&#xff0c;认为性能测试不仅仅是会用工具&#xff0c;最近又想有一把好的利器毕竟可以帮助自己更好的完成性能测试工作。这算…

QMS-云质说质量 - 1 张小泉的质量危机

云质QMS原创 转载请注明来源 作者&#xff1a;王洪石 引言 百年老店的拍蒜质量门 最近张小泉拍蒜断刀事件&#xff0c;吸引了全民关注&#xff0c;虽然随后发布了“断刀召集令”&#xff0c;但从事件发生到后续拖沓且不专业的应对&#xff0c;张小泉肯定是“失蒜”了。 张小泉…

Spring Security实战(六)—— 跨域与CORS

跨域是一种浏览器同源安全策略&#xff0c;即浏览器单方面限制脚本的跨域访问。 一、认识跨域 跨域&#xff08;Cross-Origin&#xff09;指的是在Web开发中&#xff0c;当一个网页的内容要从不同源&#xff08;即不同的域名、协议或端口&#xff09;获取时&#xff0c;就会发…

ajax的介绍及使用

ajax的介绍 开发流程 前端 ajax:前后端沟通的桥梁 后端 ajax介绍 ajax叫做异步的Javascript和xml ajax通过浏览器与服务器&#xff08;后端&#xff09;进行少量数据交互&#xff0c;进行页面异步更新&#xff08;网页不会重新加载&#xff09; 优点&#xff1a; 减轻服务器负…