{"id":585,"date":"2025-12-07T10:07:31","date_gmt":"2025-12-07T02:07:31","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=585"},"modified":"2025-12-07T10:07:31","modified_gmt":"2025-12-07T02:07:31","slug":"%e5%9f%ba%e4%ba%8evue3%e5%92%8celement-plus%e5%ae%9e%e7%8e%b0%e4%b8%80%e4%b8%aa%e5%8f%af%e5%ae%9a%e5%88%b6%e7%9a%84%e5%8a%a8%e6%80%81%e8%a1%a8%e6%a0%bc%e5%88%97%e9%85%8d%e7%bd%ae%e7%bb%84","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/07\/%e5%9f%ba%e4%ba%8evue3%e5%92%8celement-plus%e5%ae%9e%e7%8e%b0%e4%b8%80%e4%b8%aa%e5%8f%af%e5%ae%9a%e5%88%b6%e7%9a%84%e5%8a%a8%e6%80%81%e8%a1%a8%e6%a0%bc%e5%88%97%e9%85%8d%e7%bd%ae%e7%bb%84\/","title":{"rendered":"\u57fa\u4e8eVue3\u548cElement\u00a0Plus\u5b9e\u73b0\u4e00\u4e2a\u53ef\u5b9a\u5236\u7684\u52a8\u6001\u8868\u683c\u5217\u914d\u7f6e\u7ec4\u4ef6"},"content":{"rendered":"\n<p>\u4e0b\u9762\u7ed9\u4f60\u4e00\u4e2a <strong>\u53ef\u76f4\u63a5\u4f7f\u7528\u3001\u53ef\u843d\u5730\u7684\u300a\u57fa\u4e8e Vue3 + Element Plus \u5b9e\u73b0\u53ef\u5b9a\u5236\u5217\u7684\u52a8\u6001\u8868\u683c\u914d\u7f6e\u7ec4\u4ef6\u300b<\/strong> \u2014\u2014 \u5305\u542b\uff1a<\/p>\n\n\n\n<p>\u2714 \u5b8c\u6574\u4ee3\u7801\uff08\u53ef\u76f4\u63a5\u590d\u5236\u8fd0\u884c\uff09<br>\u2714 \u7ec4\u4ef6\u62c6\u5206\u3001\u8bbe\u8ba1\u601d\u8def<br>\u2714 \u652f\u6301\u5217\u663e\u793a\/\u9690\u85cf\u3001\u987a\u5e8f\u62d6\u62fd\u3001\u5bbd\u5ea6\u4e2a\u6027\u5316\u8bbe\u5b9a<br>\u2714 \u652f\u6301\u6301\u4e45\u5316\u5230 localStorage<br>\u2714 \u517c\u5bb9 Element Plus \u7684 <code>&lt;el-table&gt;<\/code><\/p>\n\n\n\n<p>\u975e\u5e38\u9002\u5408\u9879\u76ee\u5b9e\u9645\u4f7f\u7528\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\ude80 \u6700\u7ec8\u6548\u679c\uff08\u4f60\u5c06\u5b9e\u73b0\uff09<\/h1>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u7528\u6237\u70b9\u51fb \u201c\u5217\u8bbe\u7f6e\u201d \u56fe\u6807 \u2192 \u5f39\u51fa\u914d\u7f6e\u9762\u677f<\/li>\n\n\n\n<li>\u7528\u6237\u53ef\u64cd\u4f5c\uff1a\n<ul class=\"wp-block-list\">\n<li>\u52fe\u9009\u5217\u4f7f\u5176\u663e\u793a\/\u9690\u85cf<\/li>\n\n\n\n<li>\u62d6\u62fd\u6539\u53d8\u5217\u987a\u5e8f<\/li>\n\n\n\n<li>\u8bbe\u7f6e\u5217\u5bbd<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u70b9\u51fb\u4fdd\u5b58 \u2192 \u8868\u683c\u7acb\u5373\u66f4\u65b0<\/li>\n\n\n\n<li>\u5217\u914d\u7f6e\u4f1a <strong>\u81ea\u52a8\u6301\u4e45\u5316<\/strong>\uff08localStorage\uff09<\/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\">\ud83d\udce6 \u4e00\u3001\u4e3b\u7ec4\u4ef6\u7ed3\u6784\uff08TableWithColumnConfig.vue\uff09<\/h1>\n\n\n\n<p>\u5305\u542b\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;el-table><\/code><\/li>\n\n\n\n<li>\u5217\u914d\u7f6e\u6309\u94ae<\/li>\n\n\n\n<li>\u5f39\u7a97\u7ec4\u4ef6 <code>&lt;ColumnConfigDialog \/><\/code><\/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\"><strong>TableWithColumnConfig.vue<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;script setup&gt;\nimport { ref, computed, watch } from &quot;vue&quot;;\nimport ColumnConfigDialog from &quot;.\/ColumnConfigDialog.vue&quot;;\n\n\/\/ \u521d\u59cb\u5316\u5217\u914d\u7f6e\nconst defaultColumns = &#x5B;\n  { prop: &quot;name&quot;, label: &quot;\u59d3\u540d&quot;, width: 120, visible: true },\n  { prop: &quot;age&quot;, label: &quot;\u5e74\u9f84&quot;, width: 80, visible: true },\n  { prop: &quot;job&quot;, label: &quot;\u5de5\u4f5c&quot;, width: 160, visible: true },\n  { prop: &quot;address&quot;, label: &quot;\u5730\u5740&quot;, width: 240, visible: true },\n];\n\n\/\/ \u6301\u4e45\u5316 KEY\nconst STORAGE_KEY = &quot;column_config_demo&quot;;\n\n\/\/ \u4ece localStorage \u8bfb\u53d6\u914d\u7f6e\nfunction loadConfig() {\n  const saved = localStorage.getItem(STORAGE_KEY);\n  return saved ? JSON.parse(saved) : defaultColumns;\n}\n\nconst columns = ref(loadConfig());\n\n\/\/ \u8868\u683c\u6570\u636e\nconst tableData = ref(&#x5B;\n  { name: &quot;\u5f20\u4e09&quot;, age: 25, job: &quot;\u524d\u7aef\u5de5\u7a0b\u5e08&quot;, address: &quot;\u5317\u4eac&quot; },\n  { name: &quot;\u674e\u56db&quot;, age: 30, job: &quot;\u540e\u7aef\u5de5\u7a0b\u5e08&quot;, address: &quot;\u4e0a\u6d77&quot; },\n]);\n\n\/\/ \u63a7\u5236\u5f39\u7a97\nconst dialogVisible = ref(false);\n\n\/\/ \u4fdd\u5b58\u914d\u7f6e\nfunction saveConfig(newConfig) {\n  columns.value = newConfig;\n  localStorage.setItem(STORAGE_KEY, JSON.stringify(newConfig));\n}\n&amp;lt;\/script&gt;\n\n&amp;lt;template&gt;\n  &amp;lt;div&gt;\n    &amp;lt;el-button type=&quot;primary&quot; @click=&quot;dialogVisible = true&quot;&gt;\n      \u5217\u914d\u7f6e\n    &amp;lt;\/el-button&gt;\n\n    &amp;lt;!-- \u8868\u683c --&gt;\n    &amp;lt;el-table :data=&quot;tableData&quot; border style=&quot;margin-top: 16px&quot;&gt;\n      &amp;lt;el-table-column\n        v-for=&quot;col in columns&quot;\n        v-if=&quot;col.visible&quot;\n        :key=&quot;col.prop&quot;\n        :prop=&quot;col.prop&quot;\n        :label=&quot;col.label&quot;\n        :width=&quot;col.width&quot;\n      \/&gt;\n    &amp;lt;\/el-table&gt;\n\n    &amp;lt;!-- \u914d\u7f6e\u5f39\u7a97 --&gt;\n    &amp;lt;ColumnConfigDialog\n      v-model=&quot;dialogVisible&quot;\n      :columns=&quot;columns&quot;\n      @save=&quot;saveConfig&quot;\n    \/&gt;\n  &amp;lt;\/div&gt;\n&amp;lt;\/template&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\">\ud83d\udce6 \u4e8c\u3001\u5217\u914d\u7f6e\u5f39\u7a97\u7ec4\u4ef6\uff08ColumnConfigDialog.vue\uff09<\/h1>\n\n\n\n<p>\u652f\u6301\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u663e\u793a\/\u9690\u85cf\u5217<\/li>\n\n\n\n<li>\u8f93\u5165\u5217\u5bbd<\/li>\n\n\n\n<li>\u62d6\u62fd\u6392\u5e8f\uff08\u4f7f\u7528 vuedraggable@next\uff09<\/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\">\u5b89\u88c5\u4f9d\u8d56\uff08\u62d6\u62fd\u6392\u5e8f\uff09<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nnpm install vuedraggable@next\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\"><strong>ColumnConfigDialog.vue<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;script setup&gt;\nimport { ref, watch, computed } from &quot;vue&quot;;\nimport draggable from &quot;vuedraggable&quot;;\nimport { ElMessage } from &quot;element-plus&quot;;\n\nconst props = defineProps({\n  modelValue: Boolean,\n  columns: { type: Array, required: true },\n});\n\nconst emits = defineEmits(&#x5B;&quot;update:modelValue&quot;, &quot;save&quot;]);\n\n\/\/ \u672c\u5730\u4e34\u65f6\u914d\u7f6e\uff08\u4e0d\u76f4\u63a5\u4fee\u6539\u7236\u7ec4\u4ef6\uff09\nconst localConfig = ref(JSON.parse(JSON.stringify(props.columns)));\n\nwatch(\n  () =&gt; props.modelValue,\n  (val) =&gt; {\n    if (val) {\n      localConfig.value = JSON.parse(JSON.stringify(props.columns));\n    }\n  }\n);\n\n\/\/ \u4fdd\u5b58\nfunction handleSave() {\n  emits(&quot;save&quot;, localConfig.value);\n  emits(&quot;update:modelValue&quot;, false);\n  ElMessage.success(&quot;\u4fdd\u5b58\u6210\u529f\uff01&quot;);\n}\n\nfunction close() {\n  emits(&quot;update:modelValue&quot;, false);\n}\n&amp;lt;\/script&gt;\n\n&amp;lt;template&gt;\n  &amp;lt;el-dialog\n    title=&quot;\u5217\u914d\u7f6e&quot;\n    :model-value=&quot;modelValue&quot;\n    width=&quot;500px&quot;\n    @close=&quot;close&quot;\n  &gt;\n    &amp;lt;draggable v-model=&quot;localConfig&quot; item-key=&quot;prop&quot;&gt;\n      &amp;lt;template #item=&quot;{ element }&quot;&gt;\n        &amp;lt;el-row\n          style=&quot;padding: 6px; border-bottom: 1px solid #eee;&quot;\n          align=&quot;middle&quot;\n        &gt;\n          &amp;lt;el-col :span=&quot;2&quot;&gt;\n            &amp;lt;el-icon&gt;&amp;lt;Menu \/&gt;&amp;lt;\/el-icon&gt;\n          &amp;lt;\/el-col&gt;\n\n          &amp;lt;el-col :span=&quot;6&quot;&gt;\n            &amp;lt;el-checkbox v-model=&quot;element.visible&quot;&gt;\n              {{ element.label }}\n            &amp;lt;\/el-checkbox&gt;\n          &amp;lt;\/el-col&gt;\n\n          &amp;lt;el-col :span=&quot;10&quot;&gt;\n            &amp;lt;el-input-number\n              v-model=&quot;element.width&quot;\n              :min=&quot;60&quot;\n              :max=&quot;400&quot;\n              size=&quot;small&quot;\n              label=&quot;\u5217\u5bbd&quot;\n            \/&gt;\n          &amp;lt;\/el-col&gt;\n        &amp;lt;\/el-row&gt;\n      &amp;lt;\/template&gt;\n    &amp;lt;\/draggable&gt;\n\n    &amp;lt;template #footer&gt;\n      &amp;lt;el-button @click=&quot;close&quot;&gt;\u53d6\u6d88&amp;lt;\/el-button&gt;\n      &amp;lt;el-button type=&quot;primary&quot; @click=&quot;handleSave&quot;&gt;\u4fdd\u5b58&amp;lt;\/el-button&gt;\n    &amp;lt;\/template&gt;\n  &amp;lt;\/el-dialog&gt;\n&amp;lt;\/template&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\">\ud83e\udde0 \u4e09\u3001\u7ec4\u4ef6\u8bbe\u8ba1\u601d\u8def\uff08\u7b80\u660e\u8bb2\u89e3\uff09<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">1. columns \u6570\u636e\u7ed3\u6784\u6bcf\u5217\u5305\u62ec\uff1a<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n{\n  prop: &quot;name&quot;,\n  label: &quot;\u59d3\u540d&quot;,\n  width: 120,\n  visible: true\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">2. \u5f39\u7a97\u4e2d\u4f7f\u7528 <code>localConfig<\/code> \u672c\u5730\u526f\u672c<\/h3>\n\n\n\n<p>\u907f\u514d\u914d\u7f6e\u672a\u4fdd\u5b58\u524d\u5f71\u54cd\u4e3b\u8868\u683c\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. vuedraggable \u5b9e\u73b0\u5217\u987a\u5e8f\u62d6\u62fd<\/h3>\n\n\n\n<p>\u62d6\u62fd\u540e <code>localConfig<\/code> \u81ea\u52a8\u66f4\u65b0\u6392\u5e8f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. \u4fdd\u5b58\u914d\u7f6e \u2192 \u540c\u6b65\u5230\u7236\u7ec4\u4ef6 + localStorage<\/h3>\n\n\n\n<p>\u4fdd\u6301\u4e0b\u6b21\u8fdb\u5165\u4ecd\u7136\u751f\u6548\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83e\udde9 \u56db\u3001\u53ef\u6269\u5c55\u80fd\u529b\uff08\u76f4\u63a5\u53ef\u52a0\uff09<\/h1>\n\n\n\n<p>\u6211\u53ef\u4ee5\u5e2e\u4f60\u7ee7\u7eed\u6269\u5c55\u6210\u66f4\u5b8c\u6574\u7684\u7248\u672c\uff0c\u5305\u62ec\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2714 \u5217\u5206\u7ec4\uff08\u591a\u7ea7\u8868\u5934\uff09\u914d\u7f6e<\/li>\n\n\n\n<li>\u2714 \u5217\u56fa\u5b9a\uff08fixed left \/ right\uff09<\/li>\n\n\n\n<li>\u2714 \u5217\u6392\u5e8f\uff08sorter\uff09<\/li>\n\n\n\n<li>\u2714 \u5217\u8fc7\u6ee4\u5668\u914d\u7f6e<\/li>\n\n\n\n<li>\u2714 \u4e00\u952e\u6062\u590d\u9ed8\u8ba4\u914d\u7f6e<\/li>\n\n\n\n<li>\u2714 \u5c06\u914d\u7f6e\u540c\u6b65\u5230\u6570\u636e\u5e93\uff08\u7528\u6237\u7ea7\u522b\uff09<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u4e0b\u9762\u7ed9\u4f60\u4e00\u4e2a \u53ef\u76f4\u63a5\u4f7f\u7528\u3001\u53ef\u843d\u5730\u7684\u300a\u57fa\u4e8e Vue3 + Element Plus&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/12\/07\/%e5%9f%ba%e4%ba%8evue3%e5%92%8celement-plus%e5%ae%9e%e7%8e%b0%e4%b8%80%e4%b8%aa%e5%8f%af%e5%ae%9a%e5%88%b6%e7%9a%84%e5%8a%a8%e6%80%81%e8%a1%a8%e6%a0%bc%e5%88%97%e9%85%8d%e7%bd%ae%e7%bb%84\/\">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-585","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\/585","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=585"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/585\/revisions"}],"predecessor-version":[{"id":586,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/585\/revisions\/586"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}