vant-picker实现自定义内容，根据内容添加图标

前言：

        在使用vant的框架的时候发现一件事，他的下拉内容只能输入文字，不可以是自定义，比如加图标，所以使用它的class名，然后仿照他的功能给完善了下，可以实现了自定义添加内容

实现效果：

vant原来框架的内容：

我经过处理以后的效果图：这里的图片地址没有，如果满足条件，前面就有图片

实现步骤：

1、template部分：我这上面是vant的picker，可以打开看看之前的效果，这里是仿照他的效果实现的功能

 








               
                      :enterpriseList="enterpriseList"
                       @cancel="showPicker = false"
                      @onConfirm="onConfirm">
                

        

          

            
取消
            
确认
          
          

            

              

                


                  
                  {{item.text}}<>
              

            
          
        




      

2、data部分：

picker_active:1,//因为要弄一个上面有空格的效果，所以初始化从第二个开始

3、methods部分：

//点击确定事件
onConfirm(value) {
      this.enterprise = value;
      this.showPicker = false;
    },

    /**
     * 自定义picker得点击事件
     * */
    change_picker(item,index) {
      this.picker_active=index;
    } ,

//滚动条滚动事件
 change_picker_scroll(v){
      let scrollTop = v.srcElement.scrollTop;
      this.picker_active = Math.ceil(scrollTop/44)+1;//向上取整，并加上第一个空格
    },

获取数据那里的方法：

 this.enterpriseList = this.enterpriseList.map((item) => {
              return {
                keyId: item.id,
                nsrsbh: item.nsrsbh,
                text: item.nsrmc,
                jfzt:item.jfzt  //是否付费

              };
            });
            //上面加1行空格
            this.enterpriseList.unshift({});

到此结束