遇到个问题就是其中有个要展示的数据来自接口返回的两个字段。

原用法是:

原以为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 显示的数据为多个返回数据的拼接的更多相关文章

  1. element-ui 中的table的列隐藏问题

    element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条 ...

  2. C#串口通信—向串口发送数据,同步接收返回数据

    最近写C#串口通信程序,系统是B/S架构.SerialPort类有一个DataReceived事件,用来接收串口返回的数据,但这种方式在C/S架构下很好用,但B/S就不好处理了.所以写了一个同步模式接 ...

  3. Element-UI中关于table表格的样式操作

    项目中使用到element-ui组件库,经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是没有给出具体的案例,网上的资料也比 ...

  4. 如何在ElementUI中的Table控件中使用拼音进行排序

    本人使用版本是1.4.7 在这个版本中对应全是String的column进行排序并不是按照拼音的方式排列的. 这里我贴一下源代码就可以看出是为什么了: export const orderBy = f ...

  5. 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题

    此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...

  6. jquery 中post 、get的同步问题,从外部获取返回数据

    解决方法1: 在全局设置: $.ajaxSetup({ async : false }); $.ajaxSetup({ async : false }); 然后再使用post或get方法 $.get( ...

  7. AJAX获取数据成功后的返回数据如何声明成全局变量

    var result=""; $.ajax({ type: "post", url: "../reportRule/main.do?method=se ...

  8. 使用element-ui中table expand展开行控制显示隐藏

    问题讲解:在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题,可以说饿了么团队在这个UI框架的文档撰写已经非常不错了,不过还是有一些方法乍一看让人摸不着头脑,有些table ...

  9. element-ui中table渲染的快速用法

    element-ui中对table数据的渲染有一些模板式的操作,基本按照模板渲染数据即可 基本模板样式如下 <el-table :data="studentData.rows" ...

随机推荐

  1. nginx在windows系统中启动、重启、停止,常用命令

    cmd终端在进入到nginx的安装目录下使用对应命令 查看nginx的版本号:nginx -v 启动nginx:start nginx 快速停止或关闭nginx:nginx -s stop 正常停止或 ...

  2. Netdiscover

    Netdiscover不仅支持主动arp检测,还支持被动的arp检测,即把网卡设置为混杂模式,收取所有局域网内的arp广播数据包,从而判断活着的ip. 主动发现命令格式:netdiscover  -i ...

  3. 前后端分层架构MVC&MVVM

    早期 特点 页面由 JSP.PHP 等工程师在服务端生成 JSP 里揉杂大量业务代码 浏览器负责展现,服务端给什么就展现什么,展现的控制在 Web Server 层 优点 简单明快,本地起一个 Tom ...

  4. element ui 版本升级

    element ui 版本升级 1. 卸载之前版本 npm uninstall element-ui 2.重新安装element-ui npm i element-ui 3.就如package.jso ...

  5. 恕我直言你可能真的不会java第7篇:像使用SQL一样排序集合

    在开始之前,我先卖个关子提一个问题:我们现在有一个Employee员工类. @Data @AllArgsConstructor public class Employee { private Inte ...

  6. python+opencv实现检测物体聚集区域

    内容涉及:二值图像转换 / 检测连通区域面积 / 在原图上画框等 import cv2 import numpy as np for n in open('list.txt'): # list.txt ...

  7. caffe的python接口学习(3)训练模型training

    如果不进行可视化,只想得到一个最终的训练model, 那么代码非常简单,如下 : import caffe caffe.set_device(0) caffe.set_mode_gpu() solve ...

  8. SpringBoot2.x的依赖管理

    前提 这篇文章是<SpringBoot2.x入门>专辑的第1篇文章,使用的SpringBoot版本为2.3.1.RELEASE,JDK版本为1.8. 主要梳理一下SpringBoot2.x ...

  9. 集合类List底层数据结构总结

    数组: 1. 不安全 ArrayList 2. 安全 Vector链表LinkedList不安全 3.2.1 ArrayList 1. 适合随机查找和遍历,不适合删除和增加 2. 大小不足时,需要将已 ...

  10. 不就是语法和长难句吗—笔记总结Day1

    CONTENTS 第一课 简单句 第二课 并列句 第三课 名词(短语)和名词性从句 第四课 定语和定语从句 第五课 状语和状语从句 第六课 英语的特殊结构 第一课 奋斗的开始——简单句 一.什么是英语 ...