Vant Picker 选择器重置方法 - 代码示例与步骤

{"title":"Vant Picker 选择器重置方法 - 代码示例与步骤","description":"本文介绍如何使用 Vant Picker 选择器组件的 reset 方法来重置选择器内容，并提供代码示例和详细步骤。","keywords":"Vant, Picker, 选择器, 重置, 方法, 代码示例, 步骤, Vue, ref, reset()","content":"\u003cp\u003e要重置 Vant Picker 选择器，可以使用以下步骤：\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e在选择器组件中添加一个 ref 属性，例如 \u0026quot;ref=\u0026quot;picker\u0026quot;。\u003c/li\u003e\n\u003cli\u003e在方法中使用 \u0026quot;this.$refs.picker.reset()\u0026quot; 来重置选择器。\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e下面是一个示例代码：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e\u003ctemplate\u003e\n \u003cdiv\u003e\n \u003cvan-picker\n ref=\u0026quot;picker\u0026quot;\n :columns=\u0026quot;columns\u0026quot;\n @confirm=\u0026quot;onConfirm\u0026quot;\n \u003c/van-picker\u003e\n \u003cbutton @click=\u0026quot;resetPicker\u0026quot;\u003e重置选择器\u003c/button\u003e\n \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n export default {\n data() {\n return {\n columns: [\u0026quot;选项1\u0026quot;, \u0026quot;选项2\u0026quot;, \u0026quot;选项3\u0026quot;],\n };\n },\n methods: {\n onConfirm(value) {\n console.log(value);\n },\n resetPicker() {\n this.$refs.picker.reset();\n },\n },\n };\n\u003c/script\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e在上述示例中，点击\u0026quot;重置选择器\u0026quot;按钮就会调用 resetPicker 方法来重置选择器。\u003c/p\u003e