vue实现联动选择
作者：星星上的程序媛
这篇文章主要为大家详细介绍了vue实现联动选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>这样就能实现效果了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。