vue实现联动选择

2024-07-29 11:44:07

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

这样就能实现效果了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

VUE2 前端实现静态二级省市联动选择select的示例

TIPs: 用了element UI的select选择器 <el-select>. 换成普通select也差不多. 数据没写南海诸岛,没写默认全国. HTML:  <el-form-item label="选择地区:"> <el-select size="small" style="width: 100px" v-model="selectProv" plac
vue省市区三联动下拉选择组件的实现

我们曾经经常会遇到需要选择省市区的需求,我们可能是找一个插件来实现,但是有了vue之后,我们自己完全可以简单的实现这个效果,并封装为独立的.vue组件,便于日后使用我们今天来实现一个利用vuejs开发的省市区三联动的组件 CitySelect.vue组件首先来看一下最终的效果(没有写太多的样式...) 组件所需要的省市区的JSON数据(已经封装为commonjs模块了): provinces.js 这个数据中有这样几个字段: code: 当前省市区的编码 sheng: 当前所在的
vue2.0.js的多级联动选择器实现方法

由于工作需求,想实现一个多级联动选择器,但是网上现有的联动选择器都不是我想要的,我参照基于vue2.0的element-ui中的Cascader级联选择器的样式实现了复合自己要求的多级联动选择器,原理很简单,不多说,直接上代码... <template> <div id="app"> <div class="select"> <div class="input_text"><input typ
vue基于mint-ui实现城市选择三级联动

项目是基于vue2 的移动端项目,供大家参考,具体内容如下 1.实际效果地址三级联动 mint-ui picker.png 2.首先你需要去下载一个包含中国省份,城市,区县的数据如下: (这个地址里面包含二级联动数据,三级联动数据,四级联动数据等,找到自己需要的) (一个更好的中国地区数据,推荐用这个) 3.具体代码主要是用到了mint-ui的picker组件,关于mint-ui的使用就自行看官网 Ⅰ .html组件 <div> <mt-picker :slots="my
vue基于mint-ui的城市选择3级联动的示例

项目是基于 vue2 的移动端项目 1.实际效果地址三级联动 mint-ui picker.png 2.首先你需要去下载一个包含中国省份,城市,区县的数据如下: https://github.com/artiely/Administrative-divisions-of-China(里面包含二级联动数据,三级联动数据,四级联动数据等,找到自己需要的) 3.具体代码主要是用到了mint-ui的picker组件,关于mint-ui的使用就自行看官网 Ⅰ .html组件 <div> <m
基于Vue组件化的日期联动选择器功能的实现代码

我们的社区前端工程用的是element组件库,后台管理系统用的是iview,组件库都很棒,但是日期.时间选择器没有那种" 年份 - 月份 -天数 " 联动选择的组件.虽然两个组件库给出的相关组件也很棒,但是有时候确实不是太好用,不太明白为什么很多组件库都抛弃了日期联动选择.因此考虑自己动手做一个. 将时间戳转换成日期格式 // timestamp 为时间戳 new Date(timestamp) //获取到时间标砖对象,如:Sun Sep 02 2018 00:00:00 GMT+08
vue学习之mintui picker选择器实现省市二级联动示例

本文介绍了vue学习之mintui picker选择器实现省市二级联动示例,分享给大家,具体如下: Mint UI 使用文档:https://mint-ui.github.io/docs/#/zh-cn2 Popup弹出框介绍:https://mint-ui.github.io/docs/#/zh-cn2/popup Picker选择器介绍:https://mint-ui.github.io/docs/#/zh-cn2/picker Datetime picker日期选择器介绍:https://
vue.js模仿京东省市区三级联动的选择组件实例代码

前言在最近的工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,下面话不多说了,来一起看看详细的介绍吧. 显示效果如下: 注意:使用vue2.0开发实例代码 html代码如下  <section class="showChose" v-show="showChose"> <section cl
Ant design vue中的联动选择取消操作

项目中会遇到需求就是table表格中选中在侧边展示,侧边删除,table中选中取消的联动选中 ui框架:Ant design vue 组件:table 和 tag html中 <template v-for="tag in dataType">  <a-tag :key="tag.id" closable :afterClose="() => deleteDataType(tag
vue实现联动选择

本文实例为大家分享了vue实现联动选择的具体代码,供大家参考,具体内容如下因为项目需求,作者和作者头像都是由后台接口传给前端的,所以我就选择用select来实现主要想法就是当选择作者后,自动显示头像,(效果如下) 下面就分享下代码(element):页面用的就是form表单 <el-form ref="goodsCircle" :model="goodsCircle" class="form-container">
基于 Vue 的树形选择组件的示例代码

本文介绍了基于 Vue 的树形选择组件.分享给大家,具体如下: 系统要求:Vue 2 基本特性完美的多级联动效果支持无限多的分级有全选.半选.不选三种状态截图展示代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="https://v1-c
js select实现省市区联动选择

最近整了一一些表单类的移动页面,遇到了一个省市区的联动选择,本来想着用公用库里面的以前pc端的省市区选择组件,但是发现pc端的效果在手机端用效果太不理想,设计没给出具体的设计效果,只好自己整了select原生的省市区选择效果,样式使用手机自带的效果,感觉样式效果凑合还能用,数据还是用的pc的数据,只是把组件的给重写了一下,代码效果如下: var $ = require('jquery'), $window = $(window), data = require('./data-new'), $d
Android中使用开源框架Citypickerview实现省市区三级联动选择

1．概述记得之前做商城项目,需要在地址选择中实现省市区三级联动,方便用户快速的填写地址,当时使用的是一个叫做android-wheel 的开源控件,当时感觉非常好用,唯一麻烦的是需要自己整理并解析省市区的xml文件,思路很简单,但是代码量相对大了些.偶然期间发现了另外一个开源组件,也就是今天要介绍的citypickerview. github地址:crazyandcoder/citypicker 2. 实现效果下面给大家演示下实现效果: 3. 实现方法 (1)添加依赖 dependenc
基于javascript bootstrap实现生日日期联动选择

本文实例为大家分享了js实现日期联动选择的相关代码,适用于生日的选择,供大家参考,具体内容如下实现目标:年月日三个select 输入框,以及一个hidden的input,通过js获取input的值,如果有值切是日期格式,年月日select为input中的时间.否则为空.年默认区间段为1900年到当今年份本人使用了bootstrap,class请参照bootstrap的相关说明下面是html 内容: <div class="col-sm-9"> <label cl
JS简单实现城市二级联动选择插件的方法

本文实例讲述了JS简单实现城市二级联动选择插件的方法.分享给大家供大家参考.具体如下: js实现的城市联动选择菜单,网上经常见到,不多介绍了,本款城市选择菜单原型基于Select,主要使用JavaScript来实现,运用了数组和循环等基础技巧制作完成的.本效果只是为了演示如何实现,里面的数据不全,需要的自己可以添加. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ejld-city-cha-plug-codes/ 具体代码如下: <htm
jQuery 中国省市两级联动选择附图

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>省市两级联动选择&l
layui自定义插件citySelect实现省市区三级联动选择

本文实例为大家分享了layui实现省市区三级联动选择的具体代码,供大家参考,具体内容如下省市区三级菜单联动插件 /** * @ name : citySelect 省市区三级选择模块 * @ Author: aggerChen * @ version: 1.0 */ layui.define(['layer','form','element','laytpl'], function(exports){ var $ = layui.$; var form = layui.form; var la

vue实现联动选择

相关推荐

随机推荐