vue实现联动选择

Tulla ·

更新时间:2024-11-13

· 972 次阅读

本文实例为大家分享了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>

这样就能实现效果了。

VUE 选择

1024 个赞