vue實現(xiàn)聯(lián)動選擇

更新時間：2022年03月30日 08:19:30 作者：星星上的程序媛

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)聯(lián)動選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)聯(lián)動選擇的具體代碼，供大家參考，具體內(nèi)容如下

因為項目需求，作者和作者頭像都是由后臺接口傳給前端的，所以我就選擇用select來實現(xiàn)
主要想法就是當(dāng)選擇作者后，自動顯示頭像，(效果如下）

下面就分享下代碼（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: {
? ? //查詢發(fā)布者
? ? 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>

這樣就能實現(xiàn)效果了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: