摘要：对于第一种方式，回显时只需要将从后台获取的数据拼接在一起就行，对于第二种方式，需要去进行循环对比，找出对应的索引值然后进行赋值，具体代码在这里。
距离上篇文章已经快九个月了，我是不是堕落了。。
这篇文章主要是记录我在项目中遇到的一个小问题，其实说小也不小，在去年刚接触vue的时候，对于select如何绑定多个值这个问题一度让我不知所措。刚开始完全没接触过vue和elementUI直接上手，跟着element粘贴复制官网写着还挺顺利，突然某天后台需要在select选中时让我多传个值，我不知道怎么办了，官网上例子是下面这样的：
v-model只能是value的值，我完全被官网的例子限制住了（怪我太蠢）。
1.拼接value后来在群里问了问，说是可以改成这样的:value="item.value+item.label",想来大家应该也懂这个意思，为了在传值的时候更方便，可以把它改成这样:value="item.value+"/"+item.label"，之后就可以很方便的这样value.split("/")[0]取值了。
2.绑定索引还有一种方法就是不绑定具体的值，而是去绑定索引值:value="index"，在获取值的时候可以这样获取options[index].value.具体例子在这里
3.数据回显以上两种方法都可以很好的解决select绑定多值的问题，但是我们不妨多想一点，在新增操作的时候可以这样，那么编辑的时候怎么回显呢？select会根据绑定值与某个option的value值是否相同来判断是否选中，在上述两个方法中，我们不可能为了这么一个操作让后台在数据库中多存一个拼接好的value或者一个索引，想必后台同学也不会愿意的。对于第一种方式，回显时只需要将从后台获取的数据拼接在一起就行，对于第二种方式，需要去进行循环对比，找出对应的索引值,然后进行赋值，具体代码在这里。
4.总结这虽然是个挺常见的问题，但对于当时的我来说是个不小的问题，现在公司项目不那么急，抽空记录一下。这只是我自己的想法，如果您有更好的方法，不妨分享一下。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/97410.html
摘要：然后类似一样我的命名是可以在页面的任何地方使用，如果你对具体的实现方法有兴趣，欢迎点击本文结尾的链接，去我的仓库上查看。 前言 最近收到一个这样的需求,要求做一个基于 vue 和 element-ui 的通用后台框架页,具体要求如下: 要求通用性高,需要在后期四十多个子项目中使用，所以大部分地方都做成可配置的. 要求做成脚手架的形式.可以 npm 安装 要求实现多页签,并且可以通过浏...
摘要：然后类似一样我的命名是可以在页面的任何地方使用，如果你对具体的实现方法有兴趣，欢迎点击本文结尾的链接，去我的仓库上查看。 前言 最近收到一个这样的需求,要求做一个基于 vue 和 element-ui 的通用后台框架页,具体要求如下: 要求通用性高,需要在后期四十多个子项目中使用，所以大部分地方都做成可配置的. 要求做成脚手架的形式.可以 npm 安装 要求实现多页签,并且可以通过浏...
摘要：多个页签的显示，其实不难，有现成的组件，于是老夫写代码就是一把梭，撸起袖子就是干，噼里啪啦一顿写，写完一测，没有任何问题，实在是不要太简单，丢给产品预览复制浏览器地址到别的地方粘贴，不能正确回显内需要实现跳转，而且要能返回。 前言 最近收到一个这样的需求,要求做一个基于 vue 和 element-ui 的通用后台框架页,具体要求如下: 要求通用性高,需要在后期四十多个子项目中使用，...
摘要：由于项目需求，在项目中使用用到了中的组件的多选功能，多选之后保存回显所选内容，从后端会拿到一个数组，然后我把这个数组赋值给前端多选对应的数组，这样多选的数据可以正常显示问题是回显之后不能正常编辑，点击删除小图标也失效解决方法采用事件在事件中 由于项目需求，在项目中使用用到了element中的select组件的多选功能（multiple），多选之后保存回显所选内容，从后端会拿到一个数组，...
阅读 1396·2021-11-22 15:24
阅读 2480·2021-10-11 11:06
阅读 2296·2021-10-09 09:45
阅读 2491·2021-09-09 09:33
阅读 595·2019-08-30 15:53
阅读 1406·2019-08-30 12:48
阅读 578·2019-08-29 13:47
阅读 465·2019-08-26 18:27
