{"id":498,"date":"2025-12-05T14:45:30","date_gmt":"2025-12-05T06:45:30","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=498"},"modified":"2025-12-05T14:45:30","modified_gmt":"2025-12-05T06:45:30","slug":"vue%e4%bd%bf%e7%94%a8element-plus%e7%bb%84%e4%bb%b6%e7%9a%84%e6%97%b6%e9%97%b4%e6%a0%bc%e5%bc%8f%e9%97%ae%e9%a2%98%e8%a7%a3%e5%86%b3","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/05\/vue%e4%bd%bf%e7%94%a8element-plus%e7%bb%84%e4%bb%b6%e7%9a%84%e6%97%b6%e9%97%b4%e6%a0%bc%e5%bc%8f%e9%97%ae%e9%a2%98%e8%a7%a3%e5%86%b3\/","title":{"rendered":"Vue\u4f7f\u7528element\u00a0plus\u7ec4\u4ef6\u7684\u65f6\u95f4\u683c\u5f0f\u95ee\u9898\u89e3\u51b3"},"content":{"rendered":"\n<p>\u5728 Vue \u9879\u76ee\u4e2d\u4f7f\u7528 <strong>Element Plus<\/strong> \u7684\u65e5\u671f\/\u65f6\u95f4\u7ec4\u4ef6\uff08\u5982 <code>el-date-picker<\/code>\u3001<code>el-time-picker<\/code>\uff09\u65f6\uff0c\u6700\u5e38\u89c1\u7684\u95ee\u9898\u5c31\u662f <strong>\u65f6\u95f4\u683c\u5f0f\u4e0d\u4e00\u81f4<\/strong>\u3001<strong>\u7ed1\u5b9a\u503c\u7c7b\u578b\u4e0d\u6b63\u786e<\/strong>\u6216 <strong>\u5c55\u793a\u683c\u5f0f\u4e0e\u5b9e\u9645\u503c\u4e0d\u4e00\u81f4<\/strong>\u3002\u4e0b\u9762\u6211\u6574\u7406\u4e00\u4efd\u5168\u9762\u89e3\u51b3\u65b9\u6848\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">1\ufe0f\u20e3 \u5e38\u89c1\u95ee\u9898<\/h1>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u7ed1\u5b9a\u503c\u7c7b\u578b\u4e0d\u6b63\u786e<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>v-model<\/code> \u9ed8\u8ba4\u7ed1\u5b9a <strong>Date \u5bf9\u8c61<\/strong><\/li>\n\n\n\n<li>\u6709\u65f6\u5019\u7ed1\u5b9a\u7684\u5374\u662f <strong>\u5b57\u7b26\u4e32<\/strong>\uff08\u5982 <code>'2025-12-05'<\/code>\uff09<\/li>\n\n\n\n<li>\u7ed3\u679c\uff1a\u63a7\u4ef6\u4e0d\u663e\u793a\u6216\u62a5\u9519<\/li>\n<\/ul>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u663e\u793a\u683c\u5f0f\u4e0d\u4e00\u81f4<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>format<\/code> \u5c5e\u6027\u53ea\u5f71\u54cd <strong>\u663e\u793a\u683c\u5f0f<\/strong><\/li>\n\n\n\n<li><code>value-format<\/code> \u5c5e\u6027\u5f71\u54cd <strong>\u7ed1\u5b9a\u503c\u683c\u5f0f<\/strong><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">2\ufe0f\u20e3 \u6838\u5fc3\u5c5e\u6027<\/h1>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u5c5e\u6027<\/th><th>\u4f5c\u7528<\/th><\/tr><\/thead><tbody><tr><td><code>v-model<\/code><\/td><td>\u53cc\u5411\u7ed1\u5b9a\u503c<\/td><\/tr><tr><td><code>format<\/code><\/td><td>\u663e\u793a\u5728\u8f93\u5165\u6846\u7684\u683c\u5f0f\uff08\u5c55\u793a\uff09<\/td><\/tr><tr><td><code>value-format<\/code><\/td><td>v-model \u7ed1\u5b9a\u7684\u503c\u683c\u5f0f\uff08\u6570\u636e\u683c\u5f0f\uff09<\/td><\/tr><tr><td><code>type<\/code><\/td><td>\u9009\u62e9\u5668\u7c7b\u578b\uff0c\u5982 <code>date<\/code>\u3001<code>datetime<\/code>\u3001<code>daterange<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">3\ufe0f\u20e3 \u89e3\u51b3\u65b9\u6848\u793a\u4f8b<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">3.1 \u5355\u65e5\u671f\u9009\u62e9\uff08Date Picker\uff09<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;template&gt;\n  &amp;lt;el-date-picker\n    v-model=&quot;date&quot;\n    type=&quot;date&quot;\n    placeholder=&quot;\u9009\u62e9\u65e5\u671f&quot;\n    format=&quot;yyyy-MM-dd&quot;\n    value-format=&quot;yyyy-MM-dd&quot;\n  &gt;&amp;lt;\/el-date-picker&gt;\n\n  &amp;lt;p&gt;\u7ed1\u5b9a\u503c: {{ date }}&amp;lt;\/p&gt;\n&amp;lt;\/template&gt;\n\n&amp;lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;\n\nconst date = ref&amp;lt;string&gt;(&#039;2025-12-05&#039;)\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<p>\u2705 \u8bf4\u660e\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>format=\"yyyy-MM-dd\"<\/code> \u63a7\u5236\u663e\u793a<\/li>\n\n\n\n<li><code>value-format=\"yyyy-MM-dd\"<\/code> \u63a7\u5236\u7ed1\u5b9a\u503c\u7c7b\u578b\uff08\u5b57\u7b26\u4e32\uff09<\/li>\n\n\n\n<li>\u5982\u679c\u4e0d\u6307\u5b9a <code>value-format<\/code>\uff0c\u7ed1\u5b9a\u503c\u4e3a <strong>Date \u5bf9\u8c61<\/strong><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3.2 \u65e5\u671f\u65f6\u95f4\u9009\u62e9\uff08Datetime Picker\uff09<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;el-date-picker\n  v-model=&quot;datetime&quot;\n  type=&quot;datetime&quot;\n  placeholder=&quot;\u9009\u62e9\u65e5\u671f\u65f6\u95f4&quot;\n  format=&quot;yyyy-MM-dd HH:mm:ss&quot;\n  value-format=&quot;yyyy-MM-dd HH:mm:ss&quot;\n&gt;&amp;lt;\/el-date-picker&gt;\n\n&amp;lt;p&gt;\u7ed1\u5b9a\u503c: {{ datetime }}&amp;lt;\/p&gt;\n\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst datetime = ref&amp;lt;string&gt;(&#039;2025-12-05 10:30:00&#039;)\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3.3 \u8303\u56f4\u9009\u62e9\uff08Date Range Picker\uff09<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;el-date-picker\n  v-model=&quot;range&quot;\n  type=&quot;daterange&quot;\n  start-placeholder=&quot;\u5f00\u59cb\u65e5\u671f&quot;\n  end-placeholder=&quot;\u7ed3\u675f\u65e5\u671f&quot;\n  format=&quot;yyyy-MM-dd&quot;\n  value-format=&quot;yyyy-MM-dd&quot;\n&gt;&amp;lt;\/el-date-picker&gt;\n\n&amp;lt;p&gt;\u7ed1\u5b9a\u503c: {{ range }}&amp;lt;\/p&gt;\n\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst range = ref&amp;lt;string&#x5B;]&gt;(&#x5B;&#039;2025-12-01&#039;, &#039;2025-12-05&#039;])\n\n<\/pre><\/div>\n\n\n<p>\u2705 \u6ce8\u610f\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u8303\u56f4\u9009\u62e9 v-model \u662f\u6570\u7ec4<\/strong>\uff1a<code>[start, end]<\/code><\/li>\n\n\n\n<li><code>value-format<\/code> \u51b3\u5b9a\u6570\u7ec4\u4e2d\u65e5\u671f\u5b57\u7b26\u4e32\u683c\u5f0f<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">4\ufe0f\u20e3 \u4f7f\u7528 Date \u5bf9\u8c61\u7ed1\u5b9a<\/h1>\n\n\n\n<p>\u5982\u679c\u4f60\u5e0c\u671b v-model \u7ed1\u5b9a <strong>Date \u5bf9\u8c61<\/strong>\uff0c\u53ef\u4ee5 <strong>\u4e0d\u8bbe\u7f6e value-format<\/strong>\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;el-date-picker\n  v-model=&quot;dateObj&quot;\n  type=&quot;date&quot;\n  format=&quot;yyyy-MM-dd&quot;\n&gt;&amp;lt;\/el-date-picker&gt;\n\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst dateObj = ref&amp;lt;Date&gt;(new Date())\n\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>v-model \u662f <strong>Date \u5bf9\u8c61<\/strong><\/li>\n\n\n\n<li>\u8f93\u5165\u6846\u663e\u793a\u7531 <code>format<\/code> \u63a7\u5236<\/li>\n\n\n\n<li>\u63d0\u4ea4\u7ed9\u540e\u53f0\u65f6\u53ef\u7528 <code>dayjs(dateObj.value).format('yyyy-MM-dd')<\/code> \u8f6c\u5b57\u7b26\u4e32<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">5\ufe0f\u20e3 \u5c0f\u6280\u5de7<\/h1>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5b57\u7b26\u4e32 vs Date \u5bf9\u8c61<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u5982\u679c\u540e\u53f0\u8981\u6c42\u5b57\u7b26\u4e32 \u2192 \u4f7f\u7528 <code>value-format<\/code><\/li>\n\n\n\n<li>\u5982\u679c\u662f\u524d\u7aef\u8ba1\u7b97 \u2192 \u4f7f\u7528 Date \u5bf9\u8c61<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u4f7f\u7528 dayjs \u6216 moment \u5904\u7406\u65f6\u95f4<\/strong><\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport dayjs from &#039;dayjs&#039;\n\nconst formatted = dayjs(dateObj.value).format(&#039;YYYY-MM-DD HH:mm:ss&#039;)\n\n<\/pre><\/div>\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u8303\u56f4\u9009\u62e9\u9ed8\u8ba4\u65f6\u95f4\u6570\u7ec4\u4e3a\u7a7a<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u521d\u59cb\u5316\u65f6\u6700\u597d\u5199\u7a7a\u6570\u7ec4 <code>ref&lt;string[]>([])<\/code> \u6216\u9ed8\u8ba4\u65e5\u671f<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">6\ufe0f\u20e3 \u603b\u7ed3<\/h1>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>format<\/code> \u2192 \u63a7\u5236\u663e\u793a<\/li>\n\n\n\n<li><code>value-format<\/code> \u2192 \u63a7\u5236 v-model \u503c\u7c7b\u578b<\/li>\n\n\n\n<li>\u5355\u65e5\u671f\u7ed1\u5b9a\u5b57\u7b26\u4e32\uff1a<code>value-format=\"yyyy-MM-dd\"<\/code><\/li>\n\n\n\n<li>\u5355\u65e5\u671f\u7ed1\u5b9a Date \u5bf9\u8c61\uff1a\u4e0d\u5199 <code>value-format<\/code><\/li>\n\n\n\n<li>\u8303\u56f4\u9009\u62e9 \u2192 v-model \u6570\u7ec4 <code>[start, end]<\/code><\/li>\n<\/ul>\n\n\n\n<p>\u2705 \u5efa\u8bae\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u524d\u7aef\u8ba1\u7b97\u4f7f\u7528 Date \u5bf9\u8c61<\/li>\n\n\n\n<li>\u63d0\u4ea4\u540e\u53f0\u4f7f\u7528\u5b57\u7b26\u4e32\uff08value-format\uff09<\/li>\n<\/ul>\n\n\n\n<p>\u597d\uff01\u6211\u5e2e\u4f60\u5199\u4e00\u4e2a <strong>Vue 3 + TypeScript + Element Plus \u7684\u65e5\u671f\u65f6\u95f4\u9009\u62e9\u5c01\u88c5\u7ec4\u4ef6<\/strong>\uff0c\u53ef\u4ee5\u76f4\u63a5\u590d\u7528\uff0c\u652f\u6301\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5355\u65e5\u671f \/ \u65e5\u671f\u65f6\u95f4 \/ \u65e5\u671f\u8303\u56f4<\/li>\n\n\n\n<li>Date \u5bf9\u8c61\u548c\u5b57\u7b26\u4e32\u81ea\u52a8\u8f6c\u6362<\/li>\n\n\n\n<li>\u81ea\u52a8\u683c\u5f0f\u5316\u663e\u793a\u548c\u7ed1\u5b9a<\/li>\n\n\n\n<li>TS \u7c7b\u578b\u5b89\u5168<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">1\ufe0f\u20e3 \u7ec4\u4ef6\u4ee3\u7801\uff1a<code>BaseDatePicker.vue<\/code><\/h1>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;template&gt;\n  &amp;lt;el-date-picker\n    v-model=&quot;internalValue&quot;\n    :type=&quot;type&quot;\n    :format=&quot;displayFormat&quot;\n    :value-format=&quot;valueFormat&quot;\n    :start-placeholder=&quot;startPlaceholder&quot;\n    :end-placeholder=&quot;endPlaceholder&quot;\n    :placeholder=&quot;placeholder&quot;\n    @change=&quot;handleChange&quot;\n    clearable\n  &gt;&amp;lt;\/el-date-picker&gt;\n&amp;lt;\/template&gt;\n\n&amp;lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref, watch, computed, defineProps, defineEmits } from &#039;vue&#039;\nimport dayjs from &#039;dayjs&#039;\n\n\/**\n * Props \u5b9a\u4e49\n *\/\nconst props = defineProps&amp;lt;{\n  modelValue: string | Date | string&#x5B;] | Date&#x5B;]\n  type?: &#039;date&#039; | &#039;datetime&#039; | &#039;daterange&#039; | &#039;datetimerange&#039;\n  displayFormat?: string\n  valueFormat?: string\n  placeholder?: string\n  startPlaceholder?: string\n  endPlaceholder?: string\n}&gt;()\n\n\/**\n * Emit \u5b9a\u4e49\n *\/\nconst emit = defineEmits&amp;lt;(e: &#039;update:modelValue&#039;, value: typeof props.modelValue) =&gt; void&gt;()\n\n\/**\n * \u5185\u90e8\u7ed1\u5b9a\u503c\n *\/\nconst internalValue = ref&amp;lt;typeof props.modelValue&gt;(props.modelValue)\n\n\/**\n * \u9ed8\u8ba4\u683c\u5f0f\n *\/\nconst displayFormat = props.displayFormat || (props.type?.includes(&#039;datetime&#039;) ? &#039;YYYY-MM-DD HH:mm:ss&#039; : &#039;YYYY-MM-DD&#039;)\nconst valueFormat = props.valueFormat || displayFormat\n\n\/**\n * Watch \u5916\u90e8 v-model\n *\/\nwatch(() =&gt; props.modelValue, (newVal) =&gt; {\n  internalValue.value = newVal\n})\n\n\/**\n * Watch \u5185\u90e8\u503c\uff0c\u81ea\u52a8 emit\n *\/\nwatch(internalValue, (newVal) =&gt; {\n  emit(&#039;update:modelValue&#039;, newVal)\n})\n\n\/**\n * \u5904\u7406 change \u4e8b\u4ef6\uff08\u53ef\u6269\u5c55\uff09\n *\/\nconst handleChange = (val: any) =&gt; {\n  internalValue.value = val\n}\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">2\ufe0f\u20e3 \u4f7f\u7528\u793a\u4f8b<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">2.1 \u5355\u65e5\u671f\uff08\u5b57\u7b26\u4e32\uff09<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;BaseDatePicker\n  v-model=&quot;date&quot;\n  type=&quot;date&quot;\n  placeholder=&quot;\u9009\u62e9\u65e5\u671f&quot;\n\/&gt;\n\n&amp;lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;\n\nconst date = ref&amp;lt;string&gt;(&#039;2025-12-05&#039;)\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">2.2 \u65e5\u671f\u65f6\u95f4\uff08Date \u5bf9\u8c61\uff09<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;BaseDatePicker\n  v-model=&quot;datetime&quot;\n  type=&quot;datetime&quot;\n  placeholder=&quot;\u9009\u62e9\u65e5\u671f\u65f6\u95f4&quot;\n\/&gt;\n\n&amp;lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;\n\nconst datetime = ref&amp;lt;Date&gt;(new Date())\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">2.3 \u65e5\u671f\u8303\u56f4\uff08\u5b57\u7b26\u4e32\u6570\u7ec4\uff09<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;BaseDatePicker\n  v-model=&quot;range&quot;\n  type=&quot;daterange&quot;\n  start-placeholder=&quot;\u5f00\u59cb\u65e5\u671f&quot;\n  end-placeholder=&quot;\u7ed3\u675f\u65e5\u671f&quot;\n\/&gt;\n\n&amp;lt;script setup lang=&quot;ts&quot;&gt;\nimport { ref } from &#039;vue&#039;\n\nconst range = ref&amp;lt;string&#x5B;]&gt;(&#x5B;&#039;2025-12-01&#039;, &#039;2025-12-05&#039;])\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">3\ufe0f\u20e3 \u7279\u70b9<\/h1>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u81ea\u52a8\u5904\u7406 Date \u5bf9\u8c61 \/ \u5b57\u7b26\u4e32<\/strong><\/li>\n\n\n\n<li><strong>\u652f\u6301\u6240\u6709 Element Plus \u65e5\u671f\u7c7b\u578b<\/strong>\uff1a<code>date<\/code> \/ <code>datetime<\/code> \/ <code>daterange<\/code> \/ <code>datetimerange<\/code><\/li>\n\n\n\n<li><strong>TS \u7c7b\u578b\u5b89\u5168<\/strong><\/li>\n\n\n\n<li><strong>\u53ef\u81ea\u5b9a\u4e49\u663e\u793a\u683c\u5f0f\u548c\u7ed1\u5b9a\u503c\u683c\u5f0f<\/strong><\/li>\n\n\n\n<li><strong>\u53ef\u76f4\u63a5\u7ed1\u5b9a v-model<\/strong>\uff0c\u7236\u7ec4\u4ef6\u65e0\u9700\u989d\u5916\u5904\u7406<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">4\ufe0f\u20e3 \u5c0f\u6280\u5de7<\/h1>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u63d0\u4ea4\u540e\u53f0\u65f6\uff1a\u4f7f\u7528 <code>valueFormat<\/code> \u4fdd\u6301\u5b57\u7b26\u4e32\u7edf\u4e00<\/li>\n\n\n\n<li>\u524d\u7aef\u8ba1\u7b97\u65f6\uff1a\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528 Date \u5bf9\u8c61<\/li>\n\n\n\n<li>\u53ef\u5728\u7ec4\u4ef6\u4e2d\u6269\u5c55 <code>disabledDate<\/code> \u6216 <code>picker-options<\/code> \u529f\u80fd\uff0c\u589e\u5f3a\u7075\u6d3b\u6027<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u5728 Vue \u9879\u76ee\u4e2d\u4f7f\u7528 Element Plus \u7684\u65e5\u671f\/\u65f6\u95f4\u7ec4\u4ef6\uff08\u5982 el-d&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/12\/05\/vue%e4%bd%bf%e7%94%a8element-plus%e7%bb%84%e4%bb%b6%e7%9a%84%e6%97%b6%e9%97%b4%e6%a0%bc%e5%bc%8f%e9%97%ae%e9%a2%98%e8%a7%a3%e5%86%b3\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[],"class_list":["post-498","post","type-post","status-publish","format-standard","hentry","category-javascript"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=498"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/498\/revisions"}],"predecessor-version":[{"id":499,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/498\/revisions\/499"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}