vue+elementui中的el-table中拼接接口返回的两个字段的数据并展示

最新推荐文章于 2025-05-21 00:17:36 发布
原创 最新推荐文章于 2025-05-21 00:17:36 发布 · 置顶 · 1.6w 阅读 · 19 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #elementUI

最近刚学Vue，使用的elementui组件库，用到了table表格组件<el-table></el-table>标签

遇到个问题就是其中有个<el-table-column></el-table-column>要展示的数据来自接口返回的两个字段

原用法是：

<el-table :data="tableData(表格数据来源)" stripe style="width: 100%">

        <el-table-column prop="date(表格数据来源的某个字段)" label="日期(表格头部)" width="180">

</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" pr

最低0.47元/天 解锁文章

200万优质内容无限畅学
element-ui el-table-column中多个字段数字相加，拼接多个字段
weixin_41346436的博客
07-08 5024
el-table-column行内多个字段相加，展示多个字段，一般后端返回的是字符串，也有的是数字，前端根据情况需要转行即可 2中方案：parseInt（）和Number（）都可实现 后端数据格式 注：(Number(scope.row.count1)) 必须用双括号包起来，否则实现不了 //Number（） <el-table-column label="班级名称" min-width="200"> <template slot-
vue3:十三、分类管理-表格--slot插槽详细说明---表格内拼接字段、tag标签
weixin_46001736的博客
05-14 989
vue3:十三、分类管理-表格--slot插槽详细说明---表格内拼接字段、tag标签
Vue 通过公共字段,拼接两个对象数组的实例
10-16
今天小编就为大家分享一篇Vue 通过公共字段,拼接两个对象数组的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-table el-table-column两个字段值拼接展示
ilcn1949的博客
05-15 4199
table数据拿到以后，将该行数据中的两个字段拼接展示在订单状态这一列，并展示。
vue3 el-table-column列内容加粗方法
最新发布
BillKu的博客
05-21 524
在 Element UI 的。
elementui中el-table-column里显示两个后台字段
weixin_43550562的博客
06-18 5318
使用elementui组件库中的table表格组件标签时，要展示的数据来自后台返回的两个字段，用法如下： <el-table-column prop="specs,quantityUnit" label="规格"> <template slot-scope="scope"> {{scope.row.specs}}/{{scope.row.quantityUnit}} </template> </el-t
【VUE】使用Table组件进行数据双向绑定
热门推荐
Ubisoft-One kid's Dream
11-29 1万+
写在前面的    由于SIMATIC内部的框架有很多，前后端自成一家。不过前端大部分还是使用了vue。以前也听说过.NET版本的前后端分离，但也仅仅局限于听说，这次可是亲身体会到了，对比JAVA，我只能说。。。扎心了老铁们。虽然.NET有微软天生的优势，但是有时候也会捉襟见肘，在只有ASP.NET WEB SERVICE规范和基础框架以及在不使用WCF核心的情况下，框架的效率就要比JAVA的各种
Vue 通过公共字段，拼接两个对象数组
XiChuan的博客
12-27 7347
前端需要展示两个字段，工资项与工资值。因为后台数据原因，后端是将这两个数据分开返回，这边我需要将这两个数组拼接到一个数据。 直接上代码。 1.HTML部分 &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;工资查询&lt;/title&gt; &
【el-table中tree树形结构自定义下拉框】懒加载自定义节点
weixin_44503925的博客
04-23 687
因数据量巨大（十万条数据），为避免前端页面加载卡死，现将下拉节点置为点击查询后端接口进行拼接子节点数据（懒加载）。地址：https://element.eleme.cn/#/zh-CN/component/tree。生产环境已经出现页面卡死情况。官方示例代码（表示很无奈）
Vue+Element-ui＜根据相同字段合并表格＞
weixin_49210760的博客
04-27 1603
今天项目上遇到一个需求 就是还用elemtui 做的表格 让后让你把表格上根据某一列中相同的字段去合并起来 比如 类别 名字 杀人回忆 电影 无双 一代宗师 小星星 音乐 两个老虎 东方红 首先你需要把整个的按照类别的字段来排序 类别 名字 电影 杀人回忆 电影 无双 电影 一代宗师 音乐 小星星 音乐 两个老虎 音乐 东方红 <template> <div class="app-conten
vue2.0+Element-ui应用【Table表格 不同的数据匹配不同的Tag标签】
Cting1997的博客
11-29 3441
vue2.0+Element-ui学习 2018.11.29 关键词：el-table，el-tag 1、el-table中根据某一字段的value显示不同类型的el-tag（适合只有两个value的字段）【三元表达式】 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;el-table-column prop=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;colorName&amp;amp;amp;amp;
vue 返回结果是promise的处理
m0_45038985的博客
05-13 7757
原本代码 async search1(name) { const { data: resp } = await this.$http.post("/qureyBaseInfo/" + name); return resp; }, showResumeById(row){ this.dialogTableVisible = true; this.test.name=row.mytoudi_myname; this.test.i
vue中处理后台返回的 html 特殊标签(‘\&lt； p style=“xxx“ \&gt；‘)或(\＜p＞)的三种情况
小王几pl
04-26 1万+
在平时获取后台数据渲染页面的时候可能会出现后台返回的数据是带有 html 特殊标签的 需求是附带的样式也不要, 意思就是直接删掉那些内容 但是在网上找挺久都没有找到现成的方法 最后是自己找了两个方法拼接出来的 所以在这里总结一下 方便以后直接 cv // 返回数据: ret : { list: { "introduct": "&lt;p&gt;就当文字就是内容吧。&lt;/p&gt;", } } 把 html特殊字符 转成 html标签 // 处理方法 fun.
二次封装Element Ui的Table中使用render渲染函数
chelflan's blog
04-28 3102
render渲染函数的使用
如何使用el-table接收后端接口的数据，在前端显示
nlgmk的博客
05-21 1904
使用el-table+springboot+commons-csv读取后端的cxv文件上传给前端
Vue+el-table表格合并
qq_42591612的博客
08-06 3573
作为一个小菜鸟，被要求做一个表格合并，咱以前也没用过vue，好在以前用过layui，也不算纯前端小白，经过我几天查找研究，找到一个人家写的很好的案例，拿过来记录一下。废话不多说，上代码。 el-table标签里添加 :span-method=“方法名”（前面加“:”表示动态数据），在方法中处理合并行/列的逻辑。 <el-dialog :title="title" :visible.sync="computeFlag" :span-meth.
vue组件拼接两个字段的数据并显示
Java领域优质创作者，华为云享专家
09-30 9683
使用vue的elementUI组件的el-table标签展示后端返回来的数据，要对其中的两个字段进行拼接显示。
一个接口拼接传两个参数
zhangzhuo1130的博客
07-29 3025
后台写好的接口 在service里面请求这个接口时，需要将要提交的两个参数进行拼接 需要传入的两个参数在前台提交
el-table-column中绑定两个后端传递的对象字段信息
03-28
<think>好的，我现在需要解决用户的问题：在element-ui的el-table-column中同时绑定两个后端传递的对象字段信息。根据用户提供的引用内容，我需要回顾相关知识，并找到解决方案。 首先，用户提到想在el-table-column中显示两个字段，通常el-table-column的prop属性只能绑定一个字段。这时候可能需要使用template来自定义内容。根据引用[3]，用户提到在el-table-column中添加template标签，并在其中使用元素标签来应用样式。这可能同样适用于绑定多个字段。 接下来，查看引用[2]中的示例，他们使用slot-scope="scope"来访问行数据，然后在模板中显示scope.row.yearsMonth。因此，可以推断出在template中使用scope.row.field1和scope.row.field2来访问两个不同的字段。 另外，引用[1]提到在columnsConfig数组中配置slots的问题，虽然用户遇到了问题，但可能说明需要通过自定义slot来处理复杂的数据绑定。 综合这些信息，解决方案应该是使用template和slot-scope来组合两个字段。例如，在el-table-column中添加template，然后在其中使用Vue的插值表达式或字符串拼接来同时显示两个字段的值。同时，如果需要格式化或样式，可以在模板内的元素上添加行内样式，如引用[3]所述。 可能的代码结构如下：在el-table-column内部添加template，使用slot-scope获取scope，然后通过{{ scope.row.field1 + ' ' + scope.row.field2 }}的方式合并两个字段。或者更灵活地使用模板字符串进行格式化。 需要确保字段名称正确，并且后端传递的数据结构正确，包含这两个字段。此外，如果需要在不同元素中显示，可以在template中添加多个元素，每个绑定一个字段。 总结步骤： 1. 在el-table-column中使用template标签。 2. 使用slot-scope="scope"访问行数据。 3. 在模板中组合两个字段的值，如使用字符串拼接或格式化。 4. 如有需要，在元素上添加行内样式。 这样就能实现在一个表格列中显示两个后端字段的信息了。</think>要在`el-table-column`中同时绑定两个后端对象字段，可以通过以下步骤实现： ### 解决方案 1. **使用`<template slot-scope>`自定义列内容** ```html <el-table :data="tableData"> <el-table-column label="组合字段"> <template slot-scope="scope"> {{ scope.row.field1 }} - {{ scope.row.field2 }} </template> </el-table-column> </el-table> ``` * 通过`scope.row`访问整行数据 * 使用Vue插值表达式`{{}}`拼接两个字段 2. **添加样式或HTML结构**（参考引用[3]） ```html <el-table-column label="带样式的组合字段"> <template slot-scope="scope"> <span style="color:red">{{ scope.row.field1 }}</span> <span style="color:blue">{{ scope.row.field2 }}</span> </template> </el-table-column> ``` ### 实现原理 1. `slot-scope="scope"`：获取当前行的数据上下文 2. `scope.row`：包含后端返回的完整对象数据 3. 支持任意JavaScript表达式： ```html {{ `${scope.row.city}（${scope.row.province}）` }} ``` ### 配置建议 1. 确保数据对象包含目标字段： ```javascript data() { return { tableData: [{ field1: '值1', field2: '值2', //... }] } } ```
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值