{"id":409,"date":"2025-04-02T12:00:10","date_gmt":"2025-04-02T04:00:10","guid":{"rendered":"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/"},"modified":"2025-04-02T12:00:10","modified_gmt":"2025-04-02T04:00:10","slug":"%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f","status":"publish","type":"post","link":"http:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/","title":{"rendered":"\u57fa\u4e8e Vue 3 \u548c Element Plus \u6784\u5efa\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf"},"content":{"rendered":"<div class=\"article_content clearfix\" id=\"article_content\">\n <link href=\"https:\/\/csdnimg.cn\/release\/blogv2\/dist\/mdeditor\/css\/editerView\/kdoc_html_views-1a98987dfd.css\" rel=\"stylesheet\"\/>\n <link href=\"https:\/\/csdnimg.cn\/release\/blogv2\/dist\/mdeditor\/css\/editerView\/ck_htmledit_views-704d5b9767.css\" rel=\"stylesheet\"\/>\n<div class=\"markdown_views prism-atom-one-dark\" id=\"content_views\">\n  <svg style=\"display: none;\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n   <path d=\"M5,0 0,2.5 5,5z\" id=\"raphael-marker-block\" stroke-linecap=\"round\" style=\"-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\">\n   <\/path>\n  <\/svg><\/p>\n<h3>\n   <a id=\"_Vue_3__Element_Plus__0\"><br \/>\n   <\/a><br \/>\n   \u57fa\u4e8e Vue 3 \u548c Element Plus \u6784\u5efa\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf<br \/>\n  <\/h3>\n<p>\n   \u672c\u6587\u5c06\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528 Vue 3 \u548c Element Plus \u6784\u5efa\u4e00\u4e2a\u7b80\u5355\u7684\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf\u3002\u8fd9\u4e2a\u7cfb\u7edf\u5c06\u5305\u62ec\u4ee5\u4e0b\u529f\u80fd\uff1a\n  <\/p>\n<ul>\n<li>\n    \u6dfb\u52a0\u65b0\u4e66\n   <\/li>\n<li>\n    \u663e\u793a\u56fe\u4e66\u5217\u8868\n   <\/li>\n<li>\n    \u5206\u9875\u663e\u793a\u56fe\u4e66\n   <\/li>\n<li>\n    \u5220\u9664\u56fe\u4e66\n   <\/li>\n<\/ul>\n<h4>\n   <a id=\"_9\"><br \/>\n   <\/a><br \/>\n   \u76f8\u5173\u94fe\u63a5<br \/>\n  <\/h4>\n<p>\n   <a href=\"https:\/\/apifox.com\/apidoc\/shared-fa9274ac-362e-4905-806b-6135df6aa90e\/api-26240935\" rel=\"nofollow\"><br \/>\n    \u63a5\u53e3\u5730\u5740<br \/>\n   <\/a><br \/>\n   <br \/>\n   <a href=\"https:\/\/element-plus.org\/zh-CN\/\" rel=\"nofollow\"><br \/>\n    elementplus\u4e2d\u6587\u5730\u5740<br \/>\n   <\/a>\n  <\/p>\n<h4>\n   <a id=\"_12\"><br \/>\n   <\/a><br \/>\n   \u9879\u76ee\u7ed3\u6784<br \/>\n  <\/h4>\n<p>\n   \u6211\u4eec\u7684\u9879\u76ee\u7ed3\u6784\u5982\u4e0b\uff1a\n  <\/p>\n<pre><code class=\"prism language-plaintext\">src\/\n\u251c\u2500\u2500 components\/\n\u2502   \u2514\u2500\u2500 BookManager.vue\n\u251c\u2500\u2500 App.vue\n\u2514\u2500\u2500 main.js\n<\/code><\/pre>\n<p>\n   <code><br \/>\n    BookManager.vue<br \/>\n   <\/code><br \/>\n   \u662f\u6211\u4eec\u4e3b\u8981\u7684\u7ec4\u4ef6\u6587\u4ef6\uff0c\u5b83\u5305\u542b\u4e86\u56fe\u4e66\u7ba1\u7406\u7684\u6240\u6709\u903b\u8f91\u3002<br \/>\n   <code><br \/>\n    App.vue<br \/>\n   <\/code><br \/>\n   \u548c<br \/>\n   <code><br \/>\n    main.js<br \/>\n   <\/code><br \/>\n   \u662f Vue 3 \u9879\u76ee\u7684\u57fa\u7840\u6587\u4ef6\u3002\n  <\/p>\n<h4>\n   <a id=\"_26\"><br \/>\n   <\/a><br \/>\n   \u5f15\u5165\u5fc5\u8981\u7684\u5e93<br \/>\n  <\/h4>\n<p>\n   \u5728<br \/>\n   <code><br \/>\n    main.js<br \/>\n   <\/code><br \/>\n   \u6587\u4ef6\u4e2d\uff0c\u6211\u4eec\u5f15\u5165 Vue 3 \u548c Element Plus\uff0c\u5e76\u8fdb\u884c\u521d\u59cb\u5316\uff1a\n  <\/p>\n<pre><code class=\"prism language-javascript\"><span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<!-- --><\/span> createApp <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'vue'<\/span>\n<span class=\"token keyword\">import<\/span> ElementPlus <span class=\"token keyword\">from<\/span> <span class=\"token string\">'element-plus'<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token string\">'element-plus\/dist\/index.css'<\/span>\n<span class=\"token keyword\">import<\/span> App <span class=\"token keyword\">from<\/span> <span class=\"token string\">'.\/App.vue'<\/span>\n\n<span class=\"token keyword\">const<\/span> app <span class=\"token operator\">=<\/span> <span class=\"token function\">createApp<\/span><span class=\"token punctuation\">(<\/span>App<span class=\"token punctuation\">)<\/span>\napp<span class=\"token punctuation\">.<\/span><span class=\"token function\">use<\/span><span class=\"token punctuation\">(<\/span>ElementPlus<span class=\"token punctuation\">)<\/span>\napp<span class=\"token punctuation\">.<\/span><span class=\"token function\">mount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'#app'<\/span><span class=\"token punctuation\">)<\/span>\n<\/code><\/pre>\n<h4>\n   <a id=\"_41\"><br \/>\n   <\/a><br \/>\n   \u56fe\u4e66\u7ba1\u7406\u7ec4\u4ef6<br \/>\n  <\/h4>\n<p>\n   \u5728<br \/>\n   <code><br \/>\n    components\/BookManager.vue<br \/>\n   <\/code><br \/>\n   \u6587\u4ef6\u4e2d\uff0c\u6211\u4eec\u5c06\u5b9e\u73b0\u56fe\u4e66\u7ba1\u7406\u529f\u80fd\u3002\n  <\/p>\n<h5>\n   <a id=\"_45\"><br \/>\n   <\/a><br \/>\n   \u6a21\u677f\u90e8\u5206<br \/>\n  <\/h5>\n<pre><code class=\"prism language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>template<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>button-container<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-button<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>primary<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">@click<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>dialogFormVisible = true<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n      \u65b0\u589e\u56fe\u4e66\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>el-button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-dialog<\/span> <span class=\"token attr-name\">v-model<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>dialogFormVisible<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">title<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\u65b0\u589e\u56fe\u4e66<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>300px<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-form<\/span> <span class=\"token attr-name\">:model<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>form<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">label-position<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>right<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">label-width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>100px<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-form-item<\/span> <span class=\"token attr-name\">label<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\u4e66\u540d<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-input<\/span> <span class=\"token attr-name\">v-model<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>form.bookname<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>el-form-item<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-form-item<\/span> <span class=\"token attr-name\">label<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\u4f5c\u8005<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-input<\/span> <span class=\"token attr-name\">v-model<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>form.author<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>el-form-item<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-form-item<\/span> <span class=\"token attr-name\">label<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\u51fa\u7248\u793e<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-input<\/span> <span class=\"token attr-name\">v-model<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>form.publisher<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>el-form-item<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>el-form<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>template<\/span> <span class=\"token attr-name\">#footer<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>dialog-footer<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-button<\/span> <span class=\"token attr-name\">@click<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>dialogFormVisible = false<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\u53d6\u6d88<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>el-button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-button<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>primary<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">@click<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>addBook<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\u63d0\u4ea4<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>el-button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>template<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>el-dialog<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-table<\/span> <span class=\"token attr-name\">:data<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>paginatedBooks<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token special-attr\"><span class=\"token attr-name\">style<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span><span class=\"token value css language-css\"><span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 100%<\/span><span class=\"token punctuation\">\"<\/span><\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-table-column<\/span> <span class=\"token attr-name\">prop<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>id<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">label<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>ID<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>80<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-table-column<\/span> <span class=\"token attr-name\">prop<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>bookname<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">label<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\u4e66\u540d<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>120<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-table-column<\/span> <span class=\"token attr-name\">prop<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>author<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">label<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\u4f5c\u8005<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>120<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-table-column<\/span> <span class=\"token attr-name\">prop<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>publisher<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">label<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\u51fa\u7248\u793e<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>120<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-table-column<\/span> <span class=\"token attr-name\">prop<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>createdAt<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">label<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\u521b\u5efa\u65f6\u95f4<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>220<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-table-column<\/span> <span class=\"token attr-name\">prop<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>updatedAt<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">label<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\u66f4\u65b0\u65f6\u95f4<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>220<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-table-column<\/span> <span class=\"token attr-name\">label<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\u9009\u9879\u64cd\u4f5c<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">min-width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>100<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>template<\/span> <span class=\"token attr-name\">#default<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>scope<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-button<\/span>\n            <span class=\"token attr-name\">link<\/span>\n            <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>danger<span class=\"token punctuation\">\"<\/span><\/span>\n            <span class=\"token attr-name\">size<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>small<span class=\"token punctuation\">\"<\/span><\/span>\n            <span class=\"token attr-name\">@click.prevent<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>deleteRow(scope.row.id)<span class=\"token punctuation\">\"<\/span><\/span>\n        <span class=\"token punctuation\">&gt;<\/span><\/span>\n          \u5220\u9664\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>el-button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>template<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>el-table-column<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>el-table<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>pagination-container<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-pagination<\/span>\n        <span class=\"token attr-name\">@current-change<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>handleCurrentChange<span class=\"token punctuation\">\"<\/span><\/span>\n        <span class=\"token attr-name\">:current-page<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>currentPage<span class=\"token punctuation\">\"<\/span><\/span>\n        <span class=\"token attr-name\">:page-size<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>pageSize<span class=\"token punctuation\">\"<\/span><\/span>\n        <span class=\"token attr-name\">:total<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>books.length<span class=\"token punctuation\">\"<\/span><\/span>\n        <span class=\"token attr-name\">layout<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>prev, pager, next<span class=\"token punctuation\">\"<\/span><\/span>\n        <span class=\"token special-attr\"><span class=\"token attr-name\">style<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span><span class=\"token value css language-css\"><span class=\"token property\">margin-top<\/span><span class=\"token punctuation\">:<\/span> 20px<span class=\"token punctuation\">;<\/span><\/span><span class=\"token punctuation\">\"<\/span><\/span><\/span>\n    <span class=\"token punctuation\">\/&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>template<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<\/code><\/pre>\n<p>\n   \u5728\u6a21\u677f\u90e8\u5206\uff0c\u6211\u4eec\u4f7f\u7528 Element Plus \u7684\u7ec4\u4ef6\u6765\u521b\u5efa\u4e00\u4e2a\u5bf9\u8bdd\u6846\uff0c\u7528\u4e8e\u6dfb\u52a0\u65b0\u4e66\uff0c\u5e76\u663e\u793a\u56fe\u4e66\u5217\u8868\u548c\u5206\u9875\u529f\u80fd\u3002\n  <\/p>\n<h5>\n   <a id=\"_110\"><br \/>\n   <\/a><br \/>\n   \u811a\u672c\u90e8\u5206<br \/>\n  <\/h5>\n<pre><code class=\"prism language-javascript\"><span class=\"token operator\">&lt;<\/span>script setup<span class=\"token operator\">&gt;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<!-- --><\/span> ref<span class=\"token punctuation\">,<\/span> onMounted<span class=\"token punctuation\">,<\/span> computed <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'vue'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<!-- --><\/span> ElMessage <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'element-plus'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> axios <span class=\"token keyword\">from<\/span> <span class=\"token string\">'axios'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">const<\/span> dialogFormVisible <span class=\"token operator\">=<\/span> <span class=\"token function\">ref<\/span><span class=\"token punctuation\">(<\/span><span class=\"token boolean\">false<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">const<\/span> books <span class=\"token operator\">=<\/span> <span class=\"token function\">ref<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">const<\/span> form <span class=\"token operator\">=<\/span> <span class=\"token function\">ref<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<!-- --><\/span>\n  <span class=\"token literal-property property\">bookname<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token literal-property property\">author<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token literal-property property\">publisher<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">''<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">const<\/span> currentPage <span class=\"token operator\">=<\/span> <span class=\"token function\">ref<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">const<\/span> pageSize <span class=\"token operator\">=<\/span> <span class=\"token function\">ref<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">getBooksAll<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n  <span class=\"token keyword\">const<\/span> config <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n    <span class=\"token literal-property property\">method<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'get'<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token literal-property property\">url<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'http:\/\/ajax-api.itheima.net\/api\/books'<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n    <span class=\"token keyword\">const<\/span> response <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">axios<\/span><span class=\"token punctuation\">(<\/span>config<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>Array<span class=\"token punctuation\">.<\/span><span class=\"token function\">isArray<\/span><span class=\"token punctuation\">(<\/span>response<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n      books<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">=<\/span> response<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">.<\/span><span class=\"token function\">sort<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> a<span class=\"token punctuation\">.<\/span>id <span class=\"token operator\">-<\/span> b<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n      <span class=\"token keyword\">throw<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Error<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"\u6570\u636e\u683c\u5f0f\u9519\u8bef\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">(<\/span>error<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n    console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>error<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">ElMessage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<!-- --><\/span>\n      <span class=\"token literal-property property\">showClose<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token literal-property property\">message<\/span><span class=\"token operator\">:<\/span> error<span class=\"token punctuation\">.<\/span>message <span class=\"token operator\">||<\/span> error<span class=\"token punctuation\">,<\/span>\n      <span class=\"token literal-property property\">type<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'error'<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">const<\/span> paginatedBooks <span class=\"token operator\">=<\/span> <span class=\"token function\">computed<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n  <span class=\"token keyword\">const<\/span> start <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span>currentPage<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">-<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> pageSize<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">return<\/span> books<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">.<\/span><span class=\"token function\">slice<\/span><span class=\"token punctuation\">(<\/span>start<span class=\"token punctuation\">,<\/span> start <span class=\"token operator\">+<\/span> pageSize<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">handleCurrentChange<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">newPage<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n  currentPage<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">=<\/span> newPage<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">addBook<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n  <span class=\"token keyword\">const<\/span> config <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n    <span class=\"token literal-property property\">method<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'post'<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token literal-property property\">url<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"http:\/\/ajax-api.itheima.net\/api\/books\"<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token literal-property property\">headers<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n      <span class=\"token string-property property\">'Content-Type'<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'application\/json'<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token literal-property property\">data<\/span><span class=\"token operator\">:<\/span> <span class=\"token constant\">JSON<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">stringify<\/span><span class=\"token punctuation\">(<\/span>form<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token function\">axios<\/span><span class=\"token punctuation\">(<\/span>config<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">ElMessage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<!-- --><\/span>\n      <span class=\"token literal-property property\">showClose<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token literal-property property\">message<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'\u6dfb\u52a0\u56fe\u4e66\u6210\u529f'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token literal-property property\">type<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"success\"<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token function\">getBooksAll<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    form<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<!-- --><\/span> <span class=\"token literal-property property\">bookname<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">author<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">publisher<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">''<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n    dialogFormVisible<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">=<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">(<\/span>error<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n    console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>error<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">deleteRow<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">id<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n  <span class=\"token keyword\">const<\/span> config <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n    <span class=\"token literal-property property\">method<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'delete'<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token literal-property property\">url<\/span><span class=\"token operator\">:<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">http:\/\/ajax-api.itheima.net\/api\/books\/<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<!-- --><\/span>id<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token literal-property property\">headers<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n      <span class=\"token string-property property\">'User-Agent'<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'Apifox\/1.0.0 (https:\/\/apifox.com)'<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token function\">axios<\/span><span class=\"token punctuation\">(<\/span>config<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">await<\/span> <span class=\"token function\">getBooksAll<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">ElMessage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<!-- --><\/span>\n      <span class=\"token literal-property property\">showClose<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token literal-property property\">message<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'\u5220\u9664\u6210\u529f'<\/span><span class=\"token punctuation\">,<\/span>\n      <span class=\"token literal-property property\">type<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'success'<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">(<\/span>error<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n    console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>error<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token function\">onMounted<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n  <span class=\"token keyword\">await<\/span> <span class=\"token function\">getBooksAll<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>script<span class=\"token operator\">&gt;<\/span>\n<\/code><\/pre>\n<h5>\n   <a id=\"_210\"><br \/>\n   <\/a><br \/>\n   \u6837\u5f0f\u90e8\u5206<br \/>\n  <\/h5>\n<pre><code class=\"prism language-css\"><span class=\"token selector\">&lt;style scoped&gt;\n.button-container<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n  <span class=\"token property\">margin<\/span><span class=\"token punctuation\">:<\/span> 20px 0<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">padding-left<\/span><span class=\"token punctuation\">:<\/span> 10px<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n<span class=\"token selector\">.pagination-container<\/span> <span class=\"token punctuation\">{<!-- --><\/span>\n  <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">justify-content<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">margin-top<\/span><span class=\"token punctuation\">:<\/span> 5px<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n&lt;\/style&gt;\n<\/code><\/pre>\n<h4>\n   <a id=\"_226\"><br \/>\n   <\/a><br \/>\n   \u5173\u952e\u5b9e\u73b0\u7ec6\u8282<br \/>\n  <\/h4>\n<ol>\n<li>\n<p>\n     <strong><br \/>\n      \u83b7\u53d6\u56fe\u4e66\u5217\u8868<br \/>\n     <\/strong><br \/>\n     \uff1a<br \/>\n     <br \/>\n     \u4f7f\u7528<br \/>\n     <code><br \/>\n      axios<br \/>\n     <\/code><br \/>\n     \u53d1\u9001 GET \u8bf7\u6c42\uff0c\u4ece\u670d\u52a1\u5668\u83b7\u53d6\u56fe\u4e66\u5217\u8868\uff0c\u5e76\u5c06\u5176\u5b58\u50a8\u5728<br \/>\n     <code><br \/>\n      books<br \/>\n     <\/code><br \/>\n     \u53d8\u91cf\u4e2d\u3002\u4f7f\u7528<br \/>\n     <code><br \/>\n      onMounted<br \/>\n     <\/code><br \/>\n     \u94a9\u5b50\u5728\u7ec4\u4ef6\u6302\u8f7d\u65f6\u8c03\u7528<br \/>\n     <code><br \/>\n      getBooksAll<br \/>\n     <\/code><br \/>\n     \u65b9\u6cd5\u3002\n    <\/p>\n<\/li>\n<li>\n<p>\n     <strong><br \/>\n      \u5206\u9875\u663e\u793a\u56fe\u4e66<br \/>\n     <\/strong><br \/>\n     \uff1a<br \/>\n     <br \/>\n     \u4f7f\u7528<br \/>\n     <code><br \/>\n      computed<br \/>\n     <\/code><br \/>\n     \u8ba1\u7b97\u5c5e\u6027<br \/>\n     <code><br \/>\n      paginatedBooks<br \/>\n     <\/code><br \/>\n     \u6765\u5b9e\u73b0\u5206\u9875\u529f\u80fd\uff0c\u6839\u636e\u5f53\u524d\u9875\u7801\u548c\u6bcf\u9875\u663e\u793a\u7684\u6570\u91cf\u6765\u5207\u5272\u56fe\u4e66\u5217\u8868\u3002\n    <\/p>\n<\/li>\n<li>\n<p>\n     <strong><br \/>\n      \u6dfb\u52a0\u65b0\u4e66<br \/>\n     <\/strong><br \/>\n     \uff1a<br \/>\n     <br \/>\n     \u4f7f\u7528<br \/>\n     <code><br \/>\n      axios<br \/>\n     <\/code><br \/>\n     \u53d1\u9001 POST \u8bf7\u6c42\uff0c\u5c06\u65b0\u4e66\u4fe1\u606f\u53d1\u9001\u5230\u670d\u52a1\u5668\u3002\u6210\u529f\u6dfb\u52a0\u540e\uff0c\u5237\u65b0\u56fe\u4e66\u5217\u8868\uff0c\u5e76\u91cd\u7f6e\u8868\u5355\u548c\u5bf9\u8bdd\u6846\u72b6\u6001\u3002\n    <\/p>\n<\/li>\n<li>\n<p>\n     <strong><br \/>\n      \u5220\u9664\u56fe\u4e66<br \/>\n     <\/strong><br \/>\n     \uff1a<br \/>\n     <br \/>\n     \u4f7f\u7528<br \/>\n     <code><br \/>\n      axios<br \/>\n     <\/code><br \/>\n     \u53d1\u9001 DELETE \u8bf7\u6c42\uff0c\u6839\u636e\u56fe\u4e66 ID \u5220\u9664\u56fe\u4e66\u3002\u6210\u529f\u5220\u9664\u540e\uff0c\u5237\u65b0\u56fe\u4e66\u5217\u8868\u3002\n    <\/p>\n<\/li>\n<li>\n<p>\n     <strong><br \/>\n      \u6d88\u606f\u63d0\u793a<br \/>\n     <\/strong><br \/>\n     \uff1a<br \/>\n     <br \/>\n     \u4f7f\u7528 Element Plus \u7684<br \/>\n     <code><br \/>\n      ElMessage<br \/>\n     <\/code><br \/>\n     \u7ec4\u4ef6\u5728\u64cd\u4f5c\u6210\u529f\u6216\u5931\u8d25\u65f6\u663e\u793a\u6d88\u606f\u63d0\u793a\u3002\n    <\/p>\n<\/li>\n<\/ol><\/div>\n<link href=\"https:\/\/csdnimg.cn\/release\/blogv2\/dist\/mdeditor\/css\/editerView\/markdown_views-a5d25dd831.css\" rel=\"stylesheet\"\/>\n <link href=\"https:\/\/csdnimg.cn\/release\/blogv2\/dist\/mdeditor\/css\/style-e504d6a974.css\" rel=\"stylesheet\"\/>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u57fa\u4e8e Vue 3 \u548c Element Plus \u6784\u5efa\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf \u672c\u6587\u5c06\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528 Vue 3 \u548c Elem [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":215,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-409","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-17"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u57fa\u4e8e Vue 3 \u548c Element Plus \u6784\u5efa\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf - \u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/\u57fa\u4e8e-vue-3-\u548c-element-plus-\u6784\u5efa\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u57fa\u4e8e Vue 3 \u548c Element Plus \u6784\u5efa\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf - \u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51\" \/>\n<meta property=\"og:description\" content=\"\u57fa\u4e8e Vue 3 \u548c Element Plus \u6784\u5efa\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf \u672c\u6587\u5c06\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528 Vue 3 \u548c Elem [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/\u57fa\u4e8e-vue-3-\u548c-element-plus-\u6784\u5efa\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf\/\" \/>\n<meta property=\"og:site_name\" content=\"\u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-02T04:00:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"260\" \/>\n\t<meta property=\"og:image:height\" content=\"180\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin@wunen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin@wunen\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/\"},\"author\":{\"name\":\"admin@wunen\",\"@id\":\"https:\/\/www.wunen.com\/#\/schema\/person\/d5f7a6cf545656a9c90d507e64452db8\"},\"headline\":\"\u57fa\u4e8e Vue 3 \u548c Element Plus \u6784\u5efa\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf\",\"datePublished\":\"2025-04-02T04:00:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/\"},\"wordCount\":22,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.wunen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg\",\"articleSection\":[\"\u56fe\u4e66\u9605\u8bfb\"],\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/\",\"url\":\"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/\",\"name\":\"\u57fa\u4e8e Vue 3 \u548c Element Plus \u6784\u5efa\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf - \u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51\",\"isPartOf\":{\"@id\":\"https:\/\/www.wunen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg\",\"datePublished\":\"2025-04-02T04:00:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/#primaryimage\",\"url\":\"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg\",\"contentUrl\":\"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg\",\"width\":260,\"height\":180},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wunen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u57fa\u4e8e Vue 3 \u548c Element Plus \u6784\u5efa\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wunen.com\/#website\",\"url\":\"https:\/\/www.wunen.com\/\",\"name\":\"\u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51\",\"description\":\"\u8f6f\u4ef6\u8d44\u8baf\u6765\u7269\u5ae9\",\"publisher\":{\"@id\":\"https:\/\/www.wunen.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wunen.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.wunen.com\/#organization\",\"name\":\"\u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51\",\"url\":\"https:\/\/www.wunen.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wunen.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/cropped-\u7269\u5ae9-1.png\",\"contentUrl\":\"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/cropped-\u7269\u5ae9-1.png\",\"width\":1024,\"height\":1024,\"caption\":\"\u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51\"},\"image\":{\"@id\":\"https:\/\/www.wunen.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wunen.com\/#\/schema\/person\/d5f7a6cf545656a9c90d507e64452db8\",\"name\":\"admin@wunen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wunen.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d90ec1e3faf77c4d4e66e40c29b85ff6401161e0502f401dae2f0e25b38ce25e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d90ec1e3faf77c4d4e66e40c29b85ff6401161e0502f401dae2f0e25b38ce25e?s=96&d=mm&r=g\",\"caption\":\"admin@wunen\"},\"sameAs\":[\"http:\/\/www.wunen.com\"],\"url\":\"http:\/\/www.wunen.com\/index.php\/author\/adminwunen\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u57fa\u4e8e Vue 3 \u548c Element Plus \u6784\u5efa\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf - \u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/\u57fa\u4e8e-vue-3-\u548c-element-plus-\u6784\u5efa\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf\/","og_locale":"zh_CN","og_type":"article","og_title":"\u57fa\u4e8e Vue 3 \u548c Element Plus \u6784\u5efa\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf - \u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51","og_description":"\u57fa\u4e8e Vue 3 \u548c Element Plus \u6784\u5efa\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf \u672c\u6587\u5c06\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528 Vue 3 \u548c Elem [&hellip;]","og_url":"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/\u57fa\u4e8e-vue-3-\u548c-element-plus-\u6784\u5efa\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf\/","og_site_name":"\u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51","article_published_time":"2025-04-02T04:00:10+00:00","og_image":[{"width":260,"height":180,"url":"https:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg","type":"image\/jpeg"}],"author":"admin@wunen","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin@wunen","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"3 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/#article","isPartOf":{"@id":"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/"},"author":{"name":"admin@wunen","@id":"https:\/\/www.wunen.com\/#\/schema\/person\/d5f7a6cf545656a9c90d507e64452db8"},"headline":"\u57fa\u4e8e Vue 3 \u548c Element Plus \u6784\u5efa\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf","datePublished":"2025-04-02T04:00:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/"},"wordCount":22,"commentCount":0,"publisher":{"@id":"https:\/\/www.wunen.com\/#organization"},"image":{"@id":"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/#primaryimage"},"thumbnailUrl":"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg","articleSection":["\u56fe\u4e66\u9605\u8bfb"],"inLanguage":"zh-Hans","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/","url":"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/","name":"\u57fa\u4e8e Vue 3 \u548c Element Plus \u6784\u5efa\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf - \u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51","isPartOf":{"@id":"https:\/\/www.wunen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/#primaryimage"},"image":{"@id":"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/#primaryimage"},"thumbnailUrl":"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg","datePublished":"2025-04-02T04:00:10+00:00","breadcrumb":{"@id":"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/"]}]},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/#primaryimage","url":"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg","contentUrl":"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg","width":260,"height":180},{"@type":"BreadcrumbList","@id":"https:\/\/www.wunen.com\/index.php\/2025\/04\/02\/%e5%9f%ba%e4%ba%8e-vue-3-%e5%92%8c-element-plus-%e6%9e%84%e5%bb%ba%e5%9b%be%e4%b9%a6%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wunen.com\/"},{"@type":"ListItem","position":2,"name":"\u57fa\u4e8e Vue 3 \u548c Element Plus \u6784\u5efa\u56fe\u4e66\u7ba1\u7406\u7cfb\u7edf"}]},{"@type":"WebSite","@id":"https:\/\/www.wunen.com\/#website","url":"https:\/\/www.wunen.com\/","name":"\u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51","description":"\u8f6f\u4ef6\u8d44\u8baf\u6765\u7269\u5ae9","publisher":{"@id":"https:\/\/www.wunen.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wunen.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-Hans"},{"@type":"Organization","@id":"https:\/\/www.wunen.com\/#organization","name":"\u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51","url":"https:\/\/www.wunen.com\/","logo":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wunen.com\/#\/schema\/logo\/image\/","url":"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/cropped-\u7269\u5ae9-1.png","contentUrl":"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/cropped-\u7269\u5ae9-1.png","width":1024,"height":1024,"caption":"\u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51"},"image":{"@id":"https:\/\/www.wunen.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.wunen.com\/#\/schema\/person\/d5f7a6cf545656a9c90d507e64452db8","name":"admin@wunen","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wunen.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d90ec1e3faf77c4d4e66e40c29b85ff6401161e0502f401dae2f0e25b38ce25e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d90ec1e3faf77c4d4e66e40c29b85ff6401161e0502f401dae2f0e25b38ce25e?s=96&d=mm&r=g","caption":"admin@wunen"},"sameAs":["http:\/\/www.wunen.com"],"url":"http:\/\/www.wunen.com\/index.php\/author\/adminwunen\/"}]}},"_links":{"self":[{"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/posts\/409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/comments?post=409"}],"version-history":[{"count":0,"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/posts\/409\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/media\/215"}],"wp:attachment":[{"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/media?parent=409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/categories?post=409"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/tags?post=409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}