vue联动选择
星星上的程序媛 人气:0因为项目需求,作者和作者头像都是由后台接口传给前端的,所以我就选择用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>
这样就能实现效果了。
加载全部内容