vue实现联动选择
作者:星星上的程序媛 时间:2024-05-22 10:42:28
本文实例为大家分享了vue实现联动选择的具体代码,供大家参考,具体内容如下
因为项目需求,作者和作者头像都是由后台接口传给前端的,所以我就选择用select来实现
主要想法就是当选择作者后,自动显示头像,(效果如下)
下面就分享下代码(element):
页面用的就是form表单
<el-form ref="goodsCircle" :model="goodsCircle" class="form-container">
<el-form-item
label-width="80px"
label="作者:"
class="postInfo-container-item"
prop="authorInfo"
>
<el-select
filterable
v-model="goodsCircle.authorInfo"
remote
placeholder="搜索用户"
@change="getAuthorImg"
value-key="key"
>
<el-option
v-for="item in authorArr"
:key="item.key"
:label="item.label"
:value="item"
/>
</el-select>
</el-form-item>
<el-form-item prop="authorImg" label-width="80px" label="头像" style="margin-bottom: 30px;">
<el-image
v-model="goodsCircle.authorImg"
:src="goodsCircle.authorImg"
fit="cover"
lazy
style="width: 200px;height: 180px;"
>
<div slot="placeholder" class="image-slot">
加载中
<span class="dot">...</span>
</div>
</el-image>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
authorArr: [],
goodsCircle: {
authorInfo: {},
author: "",
authorImg: "",
},
};
},
methods: {
//查询发布者
getAuthorList() {
this.$api.operation
.getAuthorList({
status: this.listQuery.authorStatus
})//这是接口
.then(res => {
if (res.data.code == 200) {
let arr = [];
res.data.result.forEach((res, index) => {
arr[index] = {
key: res.id,
label: res.author,
authorImg: res.authorImg
};
});
this.authorArr = arr;
}
});
},
//change事件
getAuthorImg(param) {
this.goodsCircle.authorImg = param.authorImg;
this.goodsCircle.author = param.label;
}
},
created() {
this.getAuthorList();
}
};
</script>
这样就能实现效果了。
来源:https://blog.csdn.net/liuy_1314/article/details/95201829
标签:vue,联动选择
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
混淆矩阵Confusion Matrix概念分析翻译
2022-07-05 15:08:56
![](https://img.aspxhome.com/file/2023/7/107167_0s.png)
Python实现粒子群算法的示例
2021-06-08 17:34:02
![](https://img.aspxhome.com/file/2023/3/113143_0s.png)
如何把数据库记录显示到列表框里去?
2009-11-06 13:48:00
Python Sql数据库增删改查操作简单封装
2024-01-22 14:47:37
Vue冷门技巧递归组件实践示例详解
2024-05-09 15:13:04
![](https://img.aspxhome.com/file/2023/0/126550_0s.jpg)
Python中利用aiohttp制作异步爬虫及简单应用
2023-07-21 04:50:40
![](https://img.aspxhome.com/file/2023/6/135286_0s.png)
pymysql模块的操作实例
2024-01-28 16:27:45
详解MySQL中InnoDB的存储文件
2024-01-13 04:58:00
![](https://img.aspxhome.com/file/2023/5/118195_0s.jpg)
JavaScript也谈内存优化
2024-02-25 16:33:17
![](https://img.aspxhome.com/file/2023/0/56370_0s.jpg)
解决Pytorch修改预训练模型时遇到key不匹配的情况
2022-11-29 15:43:43
MySQL 那些常见的错误设计规范,你都知道吗
2024-01-25 18:19:36
![](https://img.aspxhome.com/file/2023/0/128390_0s.png)
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2022-10-04 00:34:40
Express无法通过req.body获取请求传递的数据解决方法
2024-06-05 09:52:06
![](https://img.aspxhome.com/file/2023/8/122388_0s.png)
在 Python 中使用 MQTT的方法
2022-01-26 12:32:48
![](https://img.aspxhome.com/file/2023/5/90515_0s.png)
pycharm激活方法到2099年(激活流程)
2022-11-17 05:45:35
![](https://img.aspxhome.com/file/2023/5/90675_0s.png)
php使用socket简单实现通信功能
2023-05-31 13:01:23
![](https://img.aspxhome.com/file/2023/5/55295_0s.png)
一次性压缩Sqlserver2005中所有库日志的存储过程
2012-01-29 17:58:28
python批量下载抖音视频
2023-09-05 11:26:14
![](https://img.aspxhome.com/file/2023/6/99236_0s.png)
面向对象的CSS
2009-07-03 12:23:00
利用Python实现自动化监控文件夹完成服务部署
2023-03-15 00:02:04