前端开发：实战场景—解决同一个item可以被多次选择的需求

最近在修改接手的一个前端项目的时候，有一个优化需求：需要禁止同一个item被同时选择多次的问题。具体需求如下所示：

其实上述问题很简单，只用在item的点击事件里面做一个同一个item禁止多选的处理即可，但是本篇博文之所以拿出来要“小题大做”，还是要顺便再介绍一下findIndex() 方法的使用。

具体的操作如下所示：

1、

       

                 :centered="true"

                 width="660"

                 height="440"

                 okText="确定"

                 cancelText="取消"

                 @ok="selectDone"

                 @cancel="cancelSelect">

         

           

               :class="['item',{selected: isMediaSelected(item.id)}]"

               v-for="item in sourceMediaList"

               :key="item.id"

               @click="selectMedia(item)">

             

               

                     :src="item.url"

                     class="img-fluid" />

               

                       controls

                       autoplay

                       class="img-fluid">

                 

                          type="video/mp4" />

               

             

             

                   :title="item.mediaName">{ {item.mediaName}}

           

         

         

                        :total="queryObj.total"

                        @change="pageChange" />

       

2、

methods: {

selectMedia (item) {

      if (this.isMediaSelected(item.id)) {

        return;

      }

         },

    isMediaSelected (id) {

      return this.mediaList.findIndex(item => item.mediaId === id) > -1;

    },

}

最终效果如下所示：

以上就是本章全部内容，欢迎关注三掌柜的微信公众号“iOS开发by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！

三掌柜的微信公众号：

三掌柜的新浪微博：