使用scope自定义element-ui中表格中数据的表示_element ui table scope-程序员宅基地

技术标签: 前端  vue.js  el-table  前端学习  javascript  

首先先说一下为什么需要自定义表格中数据展现的方式?

我们一般使用element-ui中的表格组件时,一般就是普通的从后端传来数据,通过一个tableDate数组将数据直接显示在表格中,如下所示:

<el-table :data="tableData" style="font-size: 18px; font-family:cursive ;">
<el-table-column prop="student" label="学生" width="250" align="center">
</el-table-column>
<el-table>

这就意味着传来的数据是什么,我们就只能通过prop显示什么,而无法进行一些其他操作(当然正常的显示数据就是表格要实现的,但某些情况下我们会有一些特殊要求需要实现)

那么如何实现自定义呢?

这个问题的本质就是我们需要把数据从刚才的prop中拿出来,然后我们想怎么显示这个数据,就任凭我们操作就行,那么怎么取出来呢?答案就是使用scope,我们只需要在我们要显示的这个数据列中添加template,如下:

<el-table-column prop="student" label="学生" width="250" align="center">
<template slot-scope="scope" >
<el-button  @click="delete(scope.row.studentid)" icon="el-icon-edit"></el-button>
</template>
</el-table-column>

这时的scope就像是tableData的一个元素,对应的就是表格中的这一行数据,我们可以通过scope.元素名 的方式拿到数据,就可以用这个数据做完成想实现的功能,例如我上面的例子,通过scope拿到studentid,然后就可以通过这个id删除这个学生。

以此类推,我们还可以实现一些逻辑操作,通过数据的不同让表格显示出不同的内容,让表格的数据显示更加动态。

补充:上面的slot-scope="scope" 也可以改成 #default="scop"

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_52394141/article/details/129957213

智能推荐

Linux中安装JDK-RPM_linux 安装jdk rpm-程序员宅基地

文章浏览阅读545次。Linux中安装JDK-RPM方式_linux 安装jdk rpm

net高校志愿者管理系统-73371,计算机毕业设计(上万套实战教程,赠送源码)-程序员宅基地

文章浏览阅读25次。免费领取项目源码,请关注赞收藏并私信博主,谢谢-高校志愿者管理系统主要功能模块包括页、个人资料(个人信息。修改密码)、公共管理(轮播图、系统公告)、用户管理(管理员、志愿用户)、信息管理(志愿资讯、资讯分类)、活动分类、志愿活动、报名信息、活动心得、留言反馈,采取面对对象的开发模式进行软件的开发和硬体的架设,能很好的满足实际使用的需求,完善了对应的软体架设以及程序编码的工作,采取SQL Server 作为后台数据的主要存储单元,采用Asp.Net技术进行业务系统的编码及其开发,实现了本系统的全部功能。

小米宣布用鸿蒙了吗,小米OV对于是否采用鸿蒙保持沉默,原因是中国制造需要它们...-程序员宅基地

文章浏览阅读122次。原标题:小米OV对于是否采用鸿蒙保持沉默,原因是中国制造需要它们目前华为已开始对鸿蒙系统大规模宣传,不过中国手机四强中的另外三家小米、OPPO、vivo对于是否采用鸿蒙系统保持沉默,甚至OPPO还因此而闹出了一些风波,对此柏铭科技认为这是因为中国制造当下需要小米OV几家继续将手机出口至海外市场。 2020年中国制造支持中国经济渡过了艰难的一年,这一年中国进出口贸易额保持稳步增长的势头,成为全球唯一..._小米宣布用鸿蒙系统

Kafka Eagle_kafka eagle git-程序员宅基地

文章浏览阅读1.3k次。1.Kafka Eagle实现kafka消息监控的代码细节是什么?2.Kafka owner的组成规则是什么?3.怎样使用SQL进行kafka数据预览?4.Kafka Eagle是否支持多集群监控?1.概述在《Kafka 消息监控 - Kafka Eagle》一文中,简单的介绍了 Kafka Eagle这款监控工具的作用,截图预览,以及使用详情。今天_kafka eagle git

vue.js not detected问题解决-程序员宅基地

文章浏览阅读7.8k次,点赞9次,收藏20次。最近在看vue的时候,发现之前装过的vuedevtools提示vue.js is not detected。_vue.js not detected

SBUS协议的串口发送数据和DMA解码数据问题详解_subs协议-程序员宅基地

文章浏览阅读856次,点赞12次,收藏15次。SBUS协议编码和解析_subs协议

随便推点

OC学习笔记-Objective-C概述和特点_objective-c特点及应用领域-程序员宅基地

文章浏览阅读1k次。Objective-C概述Objective-C是一种面向对象的计算机语言,1980年代初布莱德.考斯特在其公司Stepstone发明Objective-C,该语言是基于SmallTalk-80。1988年NeXT公司发布了OC,他的开发环境和类库叫NEXTSTEP, 1994年NExt与Sun公司发布了标准的NEXTSTEP系统,取名openStep。1996_objective-c特点及应用领域

STM32学习笔记6:TIM基本介绍_stm32 tim寄存器详解-程序员宅基地

文章浏览阅读955次,点赞20次,收藏16次。TIM(Timer)定时器定时器可以对输入的时钟进行计数,并在计数值达到设定值时触发中断16位计数器、预分频器、自动重装寄存器的时基单元,在 72MHz 计数时钟下可以实现最大 59.65s 的定时,59.65s65536×65536×172MHz59.65s65536×65536×721​MHz不仅具备基本的定时中断功能,而且还包含内外时钟源选择、输入捕获、输出比较、编码器接口、主从触发模式等多种功能。_stm32 tim寄存器详解

前端基础语言HTML、CSS 和 JavaScript 学习指南_艾编程学习资料-程序员宅基地

文章浏览阅读1.5k次。对于任何有兴趣学习前端 Web 开发的人来说,了解 HTML、CSS 和JavaScript 之间的区别至关重要。这三种前端语言都是您访问过的每个网站的用户界面构建块。而且,虽然每种语言都有不同的功能重点,但它们都可以共同创建令人兴奋的交互式网站,让用户保持参与。因此,您会发现学习所有三种语言都很重要。如果您有兴趣从事前端开发工作,可以通过多种方式学习这些语言——在艾编程就可以参与到学习当中来。在本文中,我们将回顾每种语言的特征、它们如何协同工作以及您可以在哪里学习它们。HTML vs C._艾编程学习资料

三维重构(10):PCL点云配准_局部点云与全局点云配准-程序员宅基地

文章浏览阅读2.8k次。点云配准主要针对点云的:不完整、旋转错位、平移错位。因此要得到完整点云就需要对局部点云进行配准。为了得到被测物体的完整数据模型,需要确定一个合适的坐标系变换,将从各个视角得到的点集合并到一个统一的坐标系下形成一个完整的数据点云,然后就可以方便地进行可视化,这就是点云数据的配准。点云配准技术通过计算机技术和统计学规律,通过计算机计算两个点云之间的错位,也就是把在不同的坐标系下的得到的点云进行坐标变..._局部点云与全局点云配准

python零基础学习书-Python零基础到进阶必读的书藉:Python学习手册pdf免费下载-程序员宅基地

文章浏览阅读273次。提取码:0oorGoogle和YouTube由于Python的高可适应性、易于维护以及适合于快速开发而采用它。如果你想要编写高质量、高效的并且易于与其他语言和工具集成的代码,《Python学习手册:第4 版》将帮助你使用Python快速实现这一点,不管你是编程新手还是Python初学者。本书是易于掌握和自学的教程,根据作者Python专家Mark Lutz的著名培训课程编写而成。《Python学习..._零基础学pythonpdf电子书

Linux socket编程实例 多进程 文件传输 服务器 网络通信【C语言】_linux网络编程文件传输,基于c语言-程序员宅基地

文章浏览阅读2.6k次,点赞11次,收藏60次。在Linux系统中,使用C语言编程设计一个基于TCP/IP的文件传输系统,从而实现网络文件的收发。主要实现为一个面向连接的、并发服务器,并由客户端程序请求文件。编写网络文件传输服务器和客户端程序,其中客户端能够将文件名称传输给服务器,服务器从客户端接收文件名,并用请求的文件内容应答客户端。同时要求一个服务器能够为多个客户并发提供服务。_linux网络编程文件传输,基于c语言