{"id":1069,"date":"2022-09-10T11:30:00","date_gmt":"2022-09-10T03:30:00","guid":{"rendered":"http:\/\/blog.xrhoujie.com\/?p=1069"},"modified":"2022-08-29T11:45:49","modified_gmt":"2022-08-29T03:45:49","slug":"vue3-element-plus%e5%ae%9e%e7%8e%b0%e8%a1%a8%e6%a0%bc%e5%88%86%e9%a1%b5%e8%bf%9e%e5%8a%a8%e6%95%88%e6%9e%9c%e3%80%82","status":"publish","type":"post","link":"http:\/\/blog.xrhoujie.com\/?p=1069","title":{"rendered":"Vue3-element-plus\u5b9e\u73b0\u8868\u683c\u5206\u9875\u8fde\u52a8\u6548\u679c\u3002"},"content":{"rendered":"\n

\u524d\u6bb5\u65f6\u95f4\u4e00\u4e2a\u9875\u9762\u9700\u6c42\uff0c\u81ea\u5df1\u7814\u7a76\u4e86\u4e00\u4e0b \u611f\u89c9\u573a\u666f\u5f88\u5b9e\u7528\u7684\u529f\u80fd\uff0c\u628a\u4ee3\u7801\u8d34\u51fa\u6765 \u514d\u5f97\u81ea\u5df1\u5fd8\u8bb0\u3002<\/p>\n\n\n\n

\u57fa\u4e8evue3+el-pagination\u5b9e\u73b0\u8868\u683c\u5206\u9875\u6548\u679c<\/h4>\n\n\n\n

vue3+element-plus \u4e3a\u6211\u4eec\u524d\u7aef\u5f00\u53d1<\/a>\u5e26\u6765\u4e86\u6781\u5927\u7684\u4fbf\u6377
1\u3001el-table + el-pagination<\/strong><\/p>\n\n\n\n

  <el-table :data=\"table_data.value.slice((currentPage - 1) * pageSize, currentPage * pageSize)\" style=\"width: 100%\">\n    <!-- \u6839\u636e\u9009\u4e2d\u7684\u6bcf\u9875\u5141\u8bb8\u5c55\u793a\u7684\u6570\u636e\u884c\u6570\u548c\u5f53\u524d\u7684\u9875\u7801\u8fdb\u884c\u6570\u636e\u7684\u5207\u5206 -->\n    <el-table-column fixed prop=\"id\" label=\"ID\u7f16\u53f7\" \/>\n    <el-table-column prop=\"name\" label=\"\u89d2\u8272\" \/>\n    <el-table-column prop=\"enable\" label=\"\u8d26\u53f7\u72b6\u6001\" \/>\n    <el-table-column fixed=\"right\" label=\"\u64cd\u4f5c\">\n      <template #default=\"scope\">\n        <el-button link type=\"text\" size=\"small\" @click=\"handleEdit(scope.$index, scope.row)\">\u7f16\u8f91<\/el-button>\n        <el-button link type=\"text\" size=\"small\" @click=\"handleEnable(scope.$index, scope.row)\">\u7981\u7528<\/el-button>\n      <\/template>\n    <\/el-table-column>\n  <\/el-table>\n\n<div class=\"demo-pagination-block\">\n    <el-pagination \n      class=\"page-content\" \n      v-model:currentPage=\"currentPage\" \n      v-model:page-size=\"pageSize\"\n      :page-sizes=\"[5, 10, 20, 30]\" \n      :small=\"small\"  \n      :disabled=\"disabled\" \n      :background=\"background\"\n      layout=\"total, sizes, prev, pager, next, jumper\" \n      :total=\"this.table_data.value.length\"\n      @size-change=\"handleSizeChange\" \n      @current-change=\"handleCurrentChange\" \/>\n  <\/div>\n\n\n2\u3001\u6570\u636e\u6bb5\u4ee3\u7801\n data() {\n  name: \"roleTable\",\n  props: ['tableData'],\n    return {\n      table_data: this.tableData,\n      currentPage: 1, \/\/\u5f53\u524d\u9875\u7801\n      pageSize: 5,\n      small: false,\n      background: true,\n      disabled: false,\n    }\n  },\n\n created() {\n    this.table_data.value = JSON.parse(JSON.stringify(this.table_data.value))\n    \/\/this.table_data.value \u8f6c\u4e49\u540e\u683c\u5f0f \n       [{\"id\": 28,\n        \"name\": \"\u6d4b\u8bd5\u4eba\u54584\",\n        \"description\": \"\",\n        \"enable\": \"\u7981\u7528\",\n        },\n       {\n        \"id\": 27,\n        \"name\": \"\u7ebf\u4e0b\",\n        \"description\": \"\",\n        \"enable\": \"\u7981\u7528\",\n       }]\n  },\n\n\n3\u3001\u5c55\u793a\u6570\u636e\u7684\u5e8f\u53f7,\u6839\u636e\u4e1a\u52a1\u9700\u6c42\u6765\u51b3\u5b9a\u662f\u5426\u9700\u8981\u8be5\u9879\u529f\u80fd\n<el-table-column label=\"\u5e8f\u53f7\">\n    <template #default=\"scope\">\n         {{ scope.$index + (currentPage - 1) * pageSize + 1 }}\n    <\/template>\n<\/el-table-column>\n<\/code><\/pre>\n\n\n\n
\u6700\u540e\u6765\u770b\u4e00\u4e0b\u6548\u679c\u5427<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u641e\u5b9a<\/p>\n","protected":false},"excerpt":{"rendered":"
\u524d\u6bb5\u65f6\u95f4\u4e00\u4e2a\u9875\u9762\u9700\u6c42\uff0c\u81ea\u5df1\u7814\u7a76\u4e86\u4e00\u4e0b \u611f\u89c9\u573a\u666f\u5f88\u5b9e\u7528\u7684\u529f\u80fd\uff0c\u628a\u4ee3\u7801\u8d34\u51fa\u6765 \u514d\u5f97\u81ea\u5df1\u5fd8\u8bb0\u3002 \u57fa\u4e8evue3+el- […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[41,1],"tags":[38],"_links":{"self":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1069"}],"collection":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1069"}],"version-history":[{"count":1,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1069\/revisions"}],"predecessor-version":[{"id":1072,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1069\/revisions\/1072"}],"wp:attachment":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1069"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1069"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}