ElementUI中 el-table-column 显示的数据为多个返回数据的拼接
遇到个问题就是其中有个要展示的数据来自接口返回的两个字段。
原用法是:
原以为prop=" "中只能放一个字段的数据,想放两个字段数据的话,要把 <el-table-column></<el-table-column> 标签再用 <template></template> 标签包裹才行如下:
<el-table :data="projNameOrCodeMenuList" class="parentNode" @row-click="chooseParentNode">
<el-table-column class="parentNodeColumn" prop="projectName,projectCode" label="项目名称(代码)" width="300">
// 使用作用域插槽,可以获取这一行返回的数据
<template slot-scope="scope"> {{scope.row.projectName}}{{scope.row.projectCode}} </template>
</el-table-column>
</el-table>
如上述代码即可实现功能,主要使用作用域插槽来实现这一需求的。
本文转自:https://blog.csdn.net/L_WalkingPig/article/details/88725159
ElementUI中 el-table-column 显示的数据为多个返回数据的拼接的更多相关文章
- element-ui 中的table的列隐藏问题
element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条 ...
- C#串口通信—向串口发送数据,同步接收返回数据
最近写C#串口通信程序,系统是B/S架构.SerialPort类有一个DataReceived事件,用来接收串口返回的数据,但这种方式在C/S架构下很好用,但B/S就不好处理了.所以写了一个同步模式接 ...
- Element-UI中关于table表格的样式操作
项目中使用到element-ui组件库,经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是没有给出具体的案例,网上的资料也比 ...
- 如何在ElementUI中的Table控件中使用拼音进行排序
本人使用版本是1.4.7 在这个版本中对应全是String的column进行排序并不是按照拼音的方式排列的. 这里我贴一下源代码就可以看出是为什么了: export const orderBy = f ...
- 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题
此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...
- jquery 中post 、get的同步问题,从外部获取返回数据
解决方法1: 在全局设置: $.ajaxSetup({ async : false }); $.ajaxSetup({ async : false }); 然后再使用post或get方法 $.get( ...
- AJAX获取数据成功后的返回数据如何声明成全局变量
var result=""; $.ajax({ type: "post", url: "../reportRule/main.do?method=se ...
- 使用element-ui中table expand展开行控制显示隐藏
问题讲解:在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题,可以说饿了么团队在这个UI框架的文档撰写已经非常不错了,不过还是有一些方法乍一看让人摸不着头脑,有些table ...
- element-ui中table渲染的快速用法
element-ui中对table数据的渲染有一些模板式的操作,基本按照模板渲染数据即可 基本模板样式如下 <el-table :data="studentData.rows" ...
随机推荐
- TensorFlow中读取图像数据的三种方式
本文面对三种常常遇到的情况,总结三种读取数据的方式,分别用于处理单张图片.大量图片,和TFRecorder读取方式.并且还补充了功能相近的tf函数. 1.处理单张图片 我们训练完模型之后,常常要用图片 ...
- 5、struct2的获得jsp参数的第三种方式
在前面已经讲解了通过在action中直接通过jsp的参数和ModelDiver的方式获得浏览器传递的参数,下面我们介绍第三种方式,也是在项目开发中推荐的方式 action不需要在实现ModelDriv ...
- sklearn机器学习算法--K近邻
K近邻 构建模型只需要保存训练数据集即可.想要对新数据点做出预测,算法会在训练数据集中找到最近的数据点,也就是它的“最近邻”. 1.K近邻分类 #第三步导入K近邻模型并实例化KN对象 from skl ...
- VM363:1 Uncaught SyntaxError: Invalid or unexpected token
此报错主要是因为json字符串转json对象时,json字符串中出现特殊字符(如:换行符)报错. json字符转json对象(如下写则报错) 更改后 参考地址: https://www.cnblogs ...
- 入门大数据---Kafka深入理解分区副本机制
一.Kafka集群 Kafka 使用 Zookeeper 来维护集群成员 (brokers) 的信息.每个 broker 都有一个唯一标识 broker.id,用于标识自己在集群中的身份,可以在配置文 ...
- openstack-taskflow 组件记录
[Summary] TaskFlow 是一个为了 openstack 实现的 python 库,使得执行 task 变得简单,一致,易扩展,可靠: 它能以一种声明的方式,将轻量级 task 对象的创建 ...
- DOM-BOM-EVENT(1)
1.DOM简介 DOM(Document Object Model)即文档对象模型,是HTML和XML文档的编程接口.它提供了对文档的结构化的表述,并定义了一种方式可以使得从程序中对该结构进行访问,从 ...
- linux test tool--"ab"
install(ubuntu os): sudo apt-get install apache2-utils usage: ab -c 200 -t 100 http://localhost:8001 ...
- github检索小技巧
GitHub筛选项目 首先打开主页 没有github账户的小伙伴先注册再登录 (其实不登录也可以下载项目) 登录状态的搜索框 未登录状态下的搜索框 点击搜索框输入内容 根据自己需要,输入关键字搜索 明 ...
- Rancher1.6 部署prometheus
一.rancher基础配置 镜像:prom/prometheus:latest 映射端口:9090:9090 服务连接: blackbox-exporter cadvisor node-exporte ...