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

最新推荐文章于 2024-07-19 09:55:53 发布
置顶 最新推荐文章于 2024-07-19 09:55:53 发布
阅读量1.6w 收藏 19
点赞数 19
分类专栏： Vue 文章标签： vue elementUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L_WalkingPig/article/details/88725159
版权

最近刚学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="parentN

最低0.47元/天 解锁文章
L_WalkingPig
关注
  • 19
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
专栏目录
Vue el-table-column根据行数据添加button和修改对应数据and控制显示条件
qq_40414159的博客
12-04 4420
插槽详解理解 表格代码 <el-table-column label="操作"> <template slot-scope="scope"> <el-button :type="scope.row.status?'danger':'primary'" @click="changeStatus(scope.$index)" >{{ scope.row.status?'中断':'执行'}}</el-button> </te
el-table el-table-column两个字段值拼接展示
ilcn1949的博客
05-15 3351
table数据拿到以后，将该行数据中的两个字段拼接展示在订单状态这一列，并展示。
【VUE】使用Table组件进行数据双向绑定
热门推荐
Ubisoft-One kid's Dream
11-29 1万+
写在前面的    由于SIMATIC内部的框架有很多，前后端自成一家。不过前端大部分还是使用了vue。以前也听说过.NET版本的前后端分离，但也仅仅局限于听说，这次可是亲身体会到了，对比JAVA，我只能说。。。扎心了老铁们。虽然.NET有微软天生的优势，但是有时候也会捉襟见肘，在只有ASP.NET WEB SERVICE规范和基础框架以及在不使用WCF核心的情况下，框架的效率就要比JAVA的各种
Vue3 进阶教程：一文详解 el-table 组件的二次封装技巧！
最新发布
hulianwangjike的博客
07-19 403
每天持续给你分享各类好用的软件源码
Vue+Element-ui＜根据相同字段合并表格＞
weixin_49210760的博客
04-27 1550
今天项目上遇到一个需求 就是还用elemtui 做的表格 让后让你把表格上根据某一列中相同的字段去合并起来 比如 类别 名字 杀人回忆 电影 无双 一代宗师 小星星 音乐 两个老虎 东方红 首先你需要把整个的按照类别的字段来排序 类别 名字 电影 杀人回忆 电影 无双 电影 一代宗师 音乐 小星星 音乐 两个老虎 音乐 东方红 <template> <div class="app-conten
vue2.0+Element-ui应用【Table表格 不同的数据匹配不同的Tag标签】
Cting1997的博客
11-29 3341
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中处理后台返回的 html 特殊标签(‘\&lt； p style=“xxx“ \&gt；‘)或(\＜p＞)的三种情况
小王几pl
04-26 9651
在平时获取后台数据渲染页面的时候可能会出现后台返回的数据是带有 html 特殊标签的 需求是附带的样式也不要, 意思就是直接删掉那些内容 但是在网上找挺久都没有找到现成的方法 最后是自己找了两个方法拼接出来的 所以在这里总结一下 方便以后直接 cv // 返回数据: ret : { list: { "introduct": "&lt;p&gt;就当文字就是内容吧。&lt;/p&gt;", } } 把 html特殊字符 转成 html标签 // 处理方法 fun.
Vue 通过公共字段,拼接两个对象数组的实例
10-16
### Vue 通过公共字段拼接两个对象数组知识点 在进行前端开发时，我们经常遇到需要将多个数据源合并为一个数据结构，以便于页面展示的场景。在Vue框架中，特别是当我们需要合并带有共同属性的两个对象数组时，可以...
el-table两个属性的合并显示
webDevelopSnail的博客
11-04 474
应用场景 起点桩号包含两个属性stakeStartMile和stakeStartMetre要显示在一个td中，就是下面K stakeStartMile+ stakeStartMetre 实现代码 <el-table-column label="起点桩号" align="center" prop="stakeStartMile,stakeStartMetre"> <template slot-scope="scope">K{{scope.row.stakeStartMile}}
关于el-form+el-table+表头部分内容和表单都是动态生成（动态绑定v-model）
qq_56366747的博客
03-10 2048
根据需求写的表单+表格，由于后端给的格式不适应表格数据格式，做了很多转换，最后提交的数据也做了格式转换。
Vue+el-table表格合并
qq_42591612的博客
08-06 3443
作为一个小菜鸟，被要求做一个表格合并，咱以前也没用过vue，好在以前用过layui，也不算纯前端小白，经过我几天查找研究，找到一个人家写的很好的案例，拿过来记录一下。废话不多说，上代码。 el-table标签里添加 :span-method=“方法名”（前面加“:”表示动态数据），在方法中处理合并行/列的逻辑。 <el-dialog :title="title" :visible.sync="computeFlag" :span-meth.
vue组件拼接两个字段的数据并显示
Java领域优质创作者，华为云享专家
09-30 9388
使用vue的elementUI组件的el-table标签展示后端返回来的数据，要对其中的两个字段进行拼接显示。
一个接口拼接传两个参数
zhangzhuo1130的博客
07-29 2934
后台写好的接口 在service里面请求这个接口时，需要将要提交的两个参数进行拼接 需要传入的两个参数在前台提交
antd Vue table 实现一列展示多个字段
逆风优雅的博客
03-29 1527
建设起止年限，使用两个字段进行拼接。
Vue，列表展示。多个字段拼接展示
lzfengquan的博客
08-30 2489
如图展示，展示出一个字段是全部列表字段的全部信息 代码如下 data（）{ return { listArr: [], } } created() {// 创建之前的钩子函数 this.getTab() // 执行加载获取tab列表的方法 }, methods: { getTab() { getList().then(res => {// 去街口数据， this.namelists = res.data.items， 假设数据返回有.
element ui el-table 插槽显示多个字段内容
波波豆奶
03-18 2227
el-table-column一列显示两个字段的内容 <el-table-column label="创建人" align="center"> <template slot-scope="scope"> {{scope.row.createName}}{{scope.row.supplier}} </template> </el-table-column> ...
如何在ant design vue table 表格当中一格放入多个参数字段
w161513820的博客
09-13 5803
效果如图 有时候会遇到一个格子里面需要放入多个字段的情况并且还要判断类型不同显示的内容不同的情况，代码如下： <span slot="actions" slot-scope="text" class="table-btn-box"> <template id="payTypes"> <ul> <li v-show="text.payType == '银行卡'">持卡人姓名 : {{text.car
vue+elementui的el-form+axios的api接口怎么配合使用
04-21
可以先在el-form的submit方法中使用axios发送请求，具体的方法如下： 在template中： ``` <el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> ``` 在script中： ``` import axios from 'axios'; export default { data() { return { form: { username: '', password: '' }, rules: { username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }] } }; }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { axios.post('/api/login', this.form).then(response => { if (response.data.code === 200) { // 登录成功，跳转到首页 this.$router.push('/home'); } else { this.$message.error('登录失败'); } }); } else { return false; } }); }, resetForm() { this.$refs.form.resetFields(); } } }; ``` 在上述代码中，我们先引入了axios，使用axios发送POST请求到后台的/api/login接口，参数为表单中的form数据。如果接口返回的状态码为200，说明登录成功，此时可以跳转到首页。如果接口返回的状态码不为200，说明登录失败，此时可以给用户提示登录失败信息。 至此，vue和element-ui的form组件与axios的api接口就配合使用成功了。
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值