el-table中某一列的图片数据需要调其它接口获取渲染

已于 2022-03-15 17:54:44 修改
阅读量1.4k 收藏 4
点赞数 1
分类专栏： 通过调用其他接口单独渲染el-table中的某一列图片
于 2021-05-22 16:27:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48612307/article/details/117163449
版权

vue.js

第一次碰到做一个表格需要调两个不同接口的数据来渲染下边上图
在这里插入图片描述
如图所示本来渲染一个表格我们调接口获取数据后给表格项的prop赋值就行的，碰到个例外
上边这个表格的数据已经通过一个接口渲染出一大部分了，最后还剩下一个推广码的位置上没有数据，
后端的同事说这一列数据需要调另一个接口才能获取到而且还要携带一个参数id，这个参数id就是从第一次渲染这个表格的接口中获取到的。：
在这里插入图片描述
不知道大家能不能看懂，里边的baseuri是请求根路径，后片拼接的就是获取这个二维码图片的接口最后是通过作用域插槽获取到的当前的id拼接在完整路径后面从而发起请求获取图片数据地址，我的理解可能就是直接通过src浏览器抓接口，
在这里插入图片描述

最终这一列的图片效果也出来了。大家觉得怎么样？欢迎来评论

LewisRoc
关注
专栏目录
Vue3 - Element Plus 表格组件 el-table “表格行数据中又嵌套了二维对象数组“，按平级循环渲染(嵌套数组视为同级行数据)， 对嵌套的数组循环展示为表格，智能合并行或列详细教程
王佳斌
07-02 3428
vue3，nuxt3，element-plus，table表格组件，el-table，vue3 element表格组件，数据中有二维数组怎么遍历循环显示，表格数据带二级数组怎么循环渲染显示，表格数据中存在一个数组要怎么才能显示到表格，el-table表格合并详细教程示例，table表格如果对象里面还有对象数组那该怎么去渲染，平常都是数组中一个对象渲染成一行，每行中还有嵌套数组怎么办，每个行数据下还有一个数组怎么显示，怎么把表格相同的数据合并为一行，合并上下两行相同数据单元格，合并行或列如果遇到相同单元格就合
Element-UI：el-table 表头筛选
weixin_44209082的博客
05-17 4672
前言 需求：根据表头筛选表格符合条件的数据 最终实现效果： 情况一：表格没有分页 html 部分： 在列中设置 filters 和 filter-method 属性即可开启该列的筛选。 filters 是一个数组，filter-method 是一个方法，它用于决定某些数据是否显示， 会传入三个参数：value, row 和 column。 <el-table-column prop="UploadStatus" label="上传逻辑" width="100" fixed="l
el-table实现动态列，列数根据接口返回
qq_37418556的博客
05-26 6411
vue，element-ui中el-table实现动态列，列数根据接口返回 solt="header"是为了插入表头的，这里遍历listStudent[0],是因为表头都一样，所以取第一行数据的字段做为表头即可 <template> <div> <el-table :data="listStudent"> <el-table-column label="id" prop="id"></el-table-column>
封装的el-table后 添加不同接口列表的处理方法
fdksfskldfdslkfs的博客
07-26 249
common.js公共组件。
Element Ui table组件单元格中渲染图片
yueye_wu的博客
09-21 812
Element Ui table组件单元格中渲染图片
关于el-table列表渲染
lxk116688的博客
08-04 764
在项目中，80%的项目都需要我们渲染列表。假如我想封装一个渲染列表的组件，那么我们应该怎么动态的从接口中拿到数据并且优雅的渲染一个列表呢？本来这应该是一个简单且多答案的问题，但是经过一个项目做下来，发现这个方法是最灵活、最简单、最实用的方法。我们分为表头数据和表体数据来渲染。...
如何进行接口调用，示例为调用渲染表格的接口
weixin_73216040的博客
03-01 385
因此，我们在api的simulationModelManagement文件夹下新建fileHistoryManagement.js文件，这个路由对应页面所需要的所有接口我们都封装在这个js文件里。fileHistoryManagement.js文件中的内容如图所示，先引入必须的依赖（参照其他人的写法，主要是对axios的封装）在前端日常工作中，调用后端接口是很平常的事情，但是有些朋友可能还不是十分清楚，给大家做个分享，至此，就完成了接口的调用，渲染结构如下：（表格中没有渲染的数据是因为后端根本没有返回，
layui一个表格中怎么接两个接口的值_15 layui中对table中的数据进行判断（0、1转换为提示信息）以及调用接口赋值...
weixin_39902085的博客
12-21 712
20180826112541732.pnglayui.use('table', function(){var table = layui.table,form = layui.form;tableIns=table.render({elem: '#bankList',url:'/bank/bankList',method: 'post', //默认：get请求cellMinWidth: 80,pa...
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
ElementUI中的el-table元素提供了丰富的接口，允许开发者快速构建表格。为了实现自适应高度，你需要在el-table元素上定义height属性。例如： ```html <el-table :data="tableData" height="250" border style=...
动态添加el-table列 和 多选表格默认选中
vq_qiqi的博客
04-26 699
动态添加el-table列父组件vertical子组件tableColChangecolChange.scss 父组件vertical <template> <div class="vertical"> <div class="tools"> <el-button icon="el-icon-s-tools" @click="colChange" class="settingIcon"></el-button> &l
elementUI el-table的简单应用及实现删除功能
weixin_44010599的博客
03-07 1350
html文件 <div id="app" class="app"> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55"> </.
element-ui table 只展开一行数据 table数据通过调接口获取
katy_1的博客
12-20 7922
借鉴博客：https://blog.csdn.net/qq_31126175/article/details/79807133 需求：表格展开行只展示一行（其实是为了避开另一个问题：展开多行数据，最后一次展开的数据 会覆盖之前展开行数据） html： &lt;el-table :data="tableData" @expand-change="rowExpand"&gt; ...
el-table列表请求接口获取 及搜索数据绑定
xiaoming4965的博客
01-17 1887
el-table列表请求接口获取
elementUI从接口获取数据，重新组合下拉参数
记录本人工作中遇到的问题、经验总结以及分享。
09-13 661
【代码】elementUI从接口获取数据，重新组合下拉参数。
elementUI中的e-table(自定义单元格样式)
qq_45549336的博客
08-05 3256
说明一下，首先想实现的样式 就是单元格中间，或者两边是自定义样式，其他是默认的 上代码:其实就是template里面判断，刚开始我是在写多个template，然后判断，后面发现死活不行，最后突然想到会不会是只预留了一个插槽，所以在里面判断。最后完美解决。 <template slot-scope="scope"> <!-- 自定义操作 --> <div v-if="item.descEn==='operation'"&.
vue多条数据渲染（带图片）
zzx262625的博客
03-23 281
在标签中包裹标签；由此可以在其渲染数据。然后用：data绑定需要渲染的数据；（记得包裹在标签中）；然后以此循环渲染数据；那怎么渲染出来图片呢？先调用接口获取需要的数据；
element UI (table表格中动态处理每行数据，最后一起归纳提交)
骑大马挎大刀
11-03 974
接口中拿到table表格需要的数组数据，对每一行（scope）数据进项打分，如果绑定数据v-model，没办法批量监控到具体的data中。
el-table中加入el-select实现默认显示且可差异化每一行
hello world ！
02-24 3987
1.场景描述 项目中用到了element-ui的el-table组件，在表格中加入了下拉框，下拉框实现默认显示第一条数据。 2.出现的问题 v-model的值不知如何定义：服务器列表是个数组，每行的数据都不一样，如果绑定一个data中的一个变量，那么每一行绑定的值都是一样的，而且还不能默认显示第一值。 下面是错误示例：在data中定义一个变量serverId <el-table ref="table":data="tableData" highlight current-row stripe st
前端调用后端接口，怎么把获取到的data的数据渲染到el-table表格里
最新发布
06-13
在 Vue.js 框架中，我们可以使用 `el-table` 组件来渲染表格，同时使用 `axios` 库来调用后端接口获取数据。 具体步骤如下： 1. 安装 `axios` 库： ```bash npm install axios --save ``` 2. 在 Vue.js 组件中定义 `el-table`，例如： ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </template> ``` 3. 在 Vue.js 组件中调用后端接口，并在获取到数据后，将数据赋值给 `tableData` 变量，例如： ```javascript <script> import axios from 'axios'; export default { data() { return { tableData: [] }; }, mounted() { axios.get('/api/data') .then(response => { // 获取到数据后，将数据赋值给 tableData 变量 this.tableData = response.data; }) .catch(error => console.error(error)); } } </script> ``` 以上代码会在组件渲染完成后，调用后端接口获取数据，并将数据赋值给 `tableData` 变量。当 `tableData` 变量的值发生变化时，`el-table` 组件也会自动更新渲染。 需要注意的是，在使用 `el-table` 组件时，需要为每一列指定一个 `prop` 属性，该属性的值对应数据中的字段名。例如，上面示例中的 `el-table-column` 组件中的 `prop` 属性分别为 `name`、`age` 和 `gender`，这些值需要与后端接口返回的数据中的字段名保持一致。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值