添加Grid分页布局自定义

Author: SmallRuralDog

public/app.js

@@ -32461,7 +32461,7 @@ var render = function() {
             [
               _c("el-pagination", {
                 attrs: {
-                  layout: "prev, pager, next, jumper,->,total, sizes",
+                  layout: _vm.attrs.pageLayout,
                   "hide-on-single-page": false,
                   total: _vm.pageData.total,
                   "page-size": _vm.pageData.pageSize,

resources/js/components/grid/Table.vue

@@ -167,7 +167,7 @@
       </div>
       <div class="table-page">
         <el-pagination
-          layout="prev, pager, next, jumper,->,total, sizes"
+          :layout="attrs.pageLayout"
           :hide-on-single-page="false"
           :total="pageData.total"
           :page-size="pageData.pageSize"

src/Grid.php

@@ -24,7 +24,7 @@
 use SmallRuralDog\Admin\Layout\Content;
 
 
-class Grid extends Component implements \JsonSerializable
+class Grid extends Component
 {
     use HasGridAttributes, HasPageAttributes, HasDefaultSort, HasQuickSearch, HasFilter;
 
@@ -380,6 +380,7 @@ public function jsonSerialize()
             $viewData['dataUrl'] = $this->dataUrl;
             $viewData['pageSizes'] = $this->pageSizes;
             $viewData['perPage'] = $this->perPage;
+            $viewData['pageLayout'] = $this->pageLayout;
             $viewData['pageBackground'] = $this->pageBackground;
             $viewData['toolbars'] = $this->toolbars->builderData();
             $viewData['batchActions'] = $this->batchActions->builderActions();

src/Grid/Concerns/HasPageAttributes.php

@@ -9,8 +9,23 @@ trait HasPageAttributes
     protected $pageSizes = [10, 15, 20, 30, 50, 100];
     protected $perPage = 15;
 
+    protected $pageLayout = "total, sizes,->,prev, pager, next, jumper";
+
     protected $pageBackground = true;
 
+    /**
+     * 设置分页布局，子组件名用逗号分隔
+     * prev, pager, next, jumper, ->, total
+     * @param string $layout
+     * @return $this
+     */
+    public function pageLayout(string $layout)
+    {
+        $this->pageLayout = $layout;
+        return $this;
+    }
+
+
     /**
      * 每页显示个数选择器的选项设置
      * @param array $sizes