vant中van-picker选项插入图片

效果如下：

 原理：在所显示的名字前面拼一个img标签

代码如下：

<van-field

　　readonly

　　is-link

　　name="picker"

　　:value="value"

　　clearable

　　label="选择您的还款银行"

　　placeholder="选择银行"

　　input-align="right"

　　:rules="[{ required: true, message: '选择银行' }]"

　　@click="showPicker = true"

　　/>

<van-popup v-model="showPicker" position="bottom">
  <van-picker
  show-toolbar
  :columns="columns.map(bank => bank.bankName)"
  @confirm="onConfirm"
  @cancel="showPicker = false"
  />
</van-popup>

import pic1 from '../../assets/pic_1.png';  //图片引用根据自己的情况而定
import pic2 from '../../assets/pic_2.png';
import pic3 from '../../assets/pic_3.png';
data() {
    return {
      banks:[
        {
          "code": "1",
          "bankName": "ธ.ก.ส."

        },
        {
          "code": "2",
          "bankName": "กรุงศรี"

        },
        {
          "code": "3",
          "bankName": "กรุงเทพ"

        }
      ],
      imgsrc: [pic1,pic2,pic3],
      columns: []，
　　　 value：null，
}}, 
created() { 
　　this.columns = this.clone(this.banks); //做克隆是为了防止图片被多次增加
　　this.columns.forEach((el, i) => { 
　　　　// console.log(el); 
　　　　this.columns[i].bankName = `<img style=" 20px;height: 20px;margin-right: 5px;" src='${this.imgsrc[i]}'>` + el.bankName; 
　　}); 
}, 

 methods: {
　　//克隆的方法
    clone (obj) {
      if (obj === null) return null;
      if (typeof obj !== "object") return obj;
      if (obj.constructor === Date) return new Date(obj);
      var newObj = new obj.constructor(); //保持继承链
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          //不遍历其原型链上的属性
          var val = obj[key];
          newObj[key] = typeof val === "object" ? this.clone(val) : val;
        }
      }
      return newObj;
    },
}

最后，因为name被我们选择的时候，加了img标签，所以弹框点【确认】后，要把img标签去掉，因为input是不识别img标签的

不做处理会导致这样子：

　　onConfirm(value) {
      let newval = value.replace(/<[^>]+>/g, ""); //用正则把带尖括号的标签去掉
      this.value = newval;
      this.showPicker = false;
    },

最后就大功告成啦！ 

参照：https://www.cnblogs.com/justyouadmin/p/13823393.html