vue select联动,vue分类左右联动

　　这篇文章主要为大家详细介绍了某视频剪辑软件实现联动选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件实现联动选择的具体代码，供大家参考，具体内容如下

　　因为项目需求，作者和作者头像都是由后台接口传给前端的，所以我就选择用挑选来实现

　　主要想法就是当选择作者后，自动显示头像，(效果如下)

　　下面就分享下代码（元素):

　　页面用的就是形式表单

　　El-form ref=货物圈:model=货物圈 class= form-container

　　埃尔-表单-项目

　　标签宽度=80px

　　标签=作者：

　　class=postInfo-container-item

　　prop=authorInfo

　　埃尔-选择

　　可滤过的

　　v-model=好圈。作者信息

　　遥远的

　　占位符=搜索用户

　　@change=getAuthorImg

　　value-key=key

　　埃尔选项

　　v-for=作者安排中的项目

　　:key=item.key

　　:label=item.label

　　:value=item

　　/

　　/el-select

　　/El-表单-项目

　　El-form-item prop= authorImg label-width= 80px label=头像style= margin-bottom:30px；

　　埃尔图像

　　v-model=好圈。创作

　　:src= goodsCircle.authorImg

　　fit=cover

　　懒惰的

　　style= width:200 px；高度：180像素；

　　div slot= placeholder class= image-slot

　　加载中

　　span class=dot ./span

　　/div

　　/el图像

　　/El-表单-项目

　　/el格式

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　authorArr: []，

　　好圈：{

　　authorInfo: {}，

　　作者： ,

　　授权： ,

　　},

　　};

　　},

　　方法：{

　　//查询发布者

　　getAuthorList() {

　　这个api.operation。getAuthorList({

　　状态：this.listQuery.authorStatus

　　})//这是接口。然后(res={

　　if (res.data.code==200) {

　　设arr=[]；

　　res.data.result.forEach((res，index)={

　　arr[index]={

　　关键字：res.id，

　　标签:研究作者，

　　授权：研究授权

　　};

　　});

　　this.authorArr=arr

　　}

　　});

　　},

　　//更改事件

　　getAuthorImg(param) {

　　这个。商品圈。作者img=param。作者img

　　这个。商品圈。作者=param。标签；

　　}

　　},

　　已创建(){

　　这个。getauthorlist()；

　　}

　　};

　　/脚本

　　这样就能实现效果了。

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。