前言
在使用vant的框架的时候发现一件事，他的下拉内容只能输入文字，不可以是自定义，比如加图标，所以使用它的class名，然后仿照他的功能给完善了下，可以实现了自定义添加内容
实现效果
vant原来框架的内容：
我经过处理以后的效果图
这里的图片地址没有，如果满足条件，前面就有图片
实现步骤
1、template部分
我这上面是vant的picker，可以打开看看之前的效果，这里是仿照他的效果实现的功能
<van-popup v-model="showPicker" position="bottom">
<!-- <van-picker-->
<!-- show-toolbar-->
<!-- :columns="enterpriseList"-->
<!-- @cancel="showPicker = false"-->
<!-- @confirm="onConfirm"-->
<!-- >-->
<!-- <an-picker>-->
<compicker-->
:enterpriseList="enterpriseList"
@cancel="showPicker = false"
@onConfirm="onConfirm">
</compicker>
<div class="van-picker">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div class="van-picker__cancel" @click="showPicker = false">取消</div>
<div class="van-picker__confirm" @click="onConfirm(enterpriseList[picker_active])">确认</div>
</div>
<div class="van-picker__columns" style="height: 220px">
<div class="van-picker-column"
@scroll="change_picker_scroll"
style="height: 220px;overflow-y: auto;">
<ul class="transition: all 0ms ease 0s; transform: translate3d(0px, 88px, 0px)"style="line-height: 44px">
<li :class='{"van-picker-column__item--selected":picker_active==index}'
class="van-ellipsis van-picker-column__item"
style="height: 44px"
@click="change_picker(item,index)"
v-for="(item,index) in enterpriseList" :key="index">
<!-- <img v-if="item.jfzt=='1'" src=""/>-->
<span v-if="item.jfzt=='1'"><img src="src"></span>
{{item.text}}<>
</ul>
</div>
</div>
</div>
<an-popup>2、data部分
picker_active:1,//因为要弄一个上面有空格的效果，所以初始化从第二个开始3、methods部分
//点击确定事件
onConfirm(value) {
this.enterprise = value;
this.showPicker = false;
},
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({});到此结束~
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
