美文网首页
2018-09-05

2018-09-05

作者: Denny_coder | 来源:发表于2018-09-05 16:43 被阅读0次

    距离上篇文章已经快九个月了,我是不是堕落了。。
    这篇文章主要是记录我在项目中遇到的一个小问题,其实说小也不小,在去年刚接触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.总结

    这虽然是个挺常见的问题,但对于当时的我来说是个不小的问题,现在公司项目不那么急,抽空记录一下。这只是我自己的想法,如果您有更好的方法,不妨分享一下。

    相关文章

      网友评论

          本文标题:2018-09-05

          本文链接:https://www.haomeiwen.com/subject/meoawftx.html