vant中的picker选择器自定义选项内容

首先，我们需要了解vant picker选择器的基本使用方法。vant picker选择器的用法可以参考官方文档：https://vant-contrib.gitee.io/vant/#/zh-CN/picker。

基本用法是：将Picker组件包裹在van-popup中，然后再在Picker组件中写入需要选择的选项。然后根据需要定义选择事件和取消事件。如下所示：

<template>
  <van-popup v-model="showPicker" :style="{ height: '80%' }">
    <van-picker
      show-toolbar
      :columns="columns"
      @cancel="onCancel"
      @confirm="onConfirm"
    />
  </van-popup>
</template>

<script>
  export default {
    data() {
      return {
        showPicker: false,
        columns: ["选项1", "选项2", "选项3"]
      };
    },
    methods: {
      onCancel() {
        this.showPicker = false;
      },
      onConfirm(value) {
        this.showPicker = false;
        console.log(`选中了${value}`);
      }
    }
  };
</script>

如果需要自定义选项的内容，则需要借助scopedSlot插槽来实现。

<template>
  <van-popup v-model="showPicker" :style="{ height: '80%' }">
    <van-picker
      show-toolbar
      :columns="columns"
      @cancel="onCancel"
      @confirm="onConfirm"
    >
      <template #item="{index, column}">
        <span>{{column.options[index].value}}</span>
        <van-button
          type="warning"
          size="small"
          @click.stop.prevent="handleClick(index, column.options)"
        >自定义操作</van-button>
      </template>
    </van-picker>
  </van-popup>
</template>

<script>
  export default {
    data() {
      return {
        showPicker: false,
        columns: [
          { values: ["选项1", "选项2", "选项3"], defaultIndex: 0, options: [] },
          { values: ["选项A", "选项B", "选项C"], defaultIndex: 1, options: [] }
        ]
      };
    },
    methods: {
      onCancel() {
        this.showPicker = false;
      },
      onConfirm(value) {
        this.showPicker = false;
        console.log(`选中了${value}`);
      },
      handleClick(index, options) {
        console.log(`操作了${options[index].value}`);
      }
    }
  };
</script>

以上代码中，我们利用了<template #item="{index, column}">插槽来自定义选项内容。具体来说，我们在每一个选项的后面添加了一个van-button组件，点击之后就会触发handleClick方法，从而实现对选项的自定义操作。

其中，<template #item="{index, column}">中的参数index表示当前选项在options数组中的下标，column则是当前所在的列对象。我们可以通过column.options[index]获取到当前选项的完整信息。在上面的例子中，我们将column.options[index].value作为文本内容，来显示选择的选项。

需要注意的是，对于自定义选项内容的操作，我们必须自己通过数组定义选项的信息，即columns选项中的values和options两个属性。在values中写入选项的基本内容，而options则是一个空数组，在代码中通过操作该数组来实现自定义的选项内容。例如，在handleClick方法中，我们可以通过修改options数组来实现对选项的删除、添加等操作。

以上就是vant picker选择器自定义选项内容的操作攻略。