perf: 优化CrudTable插槽传入方式,修复 @0.9.2-2

Author: BoBoooooo

Diff for: package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.9.2-1",
+  "version": "0.9.2-2",
   "author": "BoBo<[email protected]>",
   "main": "lib/ProCrud.umd.min.js",
   "files": [

Diff for: src/component/crud-table/src/CrudTable.vue

@@ -27,6 +27,7 @@
           <slot name="append"></slot>
         </template>
         <template #btnBarPrevBtn>
+          <slot name="btnBarPrevBtn" />
           <!-- 批量删除按钮 -->
           <el-button v-if="view.btnDel" @click="btnDeletesOnClick" type="danger" size="mini" icon="el-icon-delete">{{ text.multiDel }}</el-button>
           <!-- 添加按钮 -->
@@ -36,8 +37,9 @@
         <template #_action_header v-if="view.btnAddOnColumnHeader">
           <el-button icon="el-icon-plus" size="mini" type="primary" style="color:white" @click.stop="btnAdd"></el-button>
         </template>
-        <template #columnFormatter="{row,prop}">
-          <slot name="columnFormatter" :row="row" :prop="prop"></slot>
+        <!-- 表格自定义列/表头插槽,动态传入 -->
+        <template :slot="slotName" slot-scope="scope"  v-for="(slotName) in Object.keys(slots).filter(key=> !['btnCustom','append','btnBarPrevBtn','dialogFooter'].includes(key))">
+          <slot :name="slotName"  :row="scope.row" :prop="scope.prop" :column="scope.column"></slot>
         </template>
         <template slot-scope="scope" slot="actionColumn">
           <!-- 操作列-添加按钮 -->
@@ -250,7 +252,7 @@ export default defineComponent({
   },
   emits: ['form-btn-on-click', 'form-change', 'selection-change'],
   setup(props: CrudTableProps, {
-    listeners, attrs, emit, root,
+    listeners, attrs, emit, root, slots,
   }) {
     const {
       $PROCRUD, $message, $confirm,
@@ -302,7 +304,7 @@ export default defineComponent({
       }
       // 操作列是否隐藏
       if (!viewObj.actionColumn) {
-        tableConfig.columns = tableConfig.columns.filter((item: any) => item.slotName !== 'actionColumn');
+        tableConfig.columns = tableConfig.columns.filter(item => item.slotName !== 'actionColumn');
       }
 
       return viewObj;
@@ -611,6 +613,7 @@ export default defineComponent({
       text,
       request,
       treeload,
+      slots: ref(slots),
     };
   },
 });

Diff for: src/component/pro-table/src/ProTable.vue

@@ -204,7 +204,9 @@ export default defineComponent({
     },
   },
   emits: ['done', 'selection-change'],
-  setup(props: ProTableProps, { listeners, emit, attrs }) {
+  setup(props: ProTableProps, {
+    listeners, emit, attrs, root, slots,
+  }) {
     // 表格数据总数
     const total = ref(0);
     // 是否在加载
@@ -404,6 +406,7 @@ export default defineComponent({
       fetchHandler(true);
       // 自适应分页组件按钮;
       window.addEventListener('resize', resizeHandler);
+      console.log(slots);
     });
 
     onBeforeUnmount(() => {

Diff for: src/demo/component/PersonCrudTable.vue

@@ -7,6 +7,9 @@
 
 <template>
   <CrudTable ref="table" tableName="person" tableTitle="员工管理" fullHeight orderCondition="timestamp desc" :visibleList="visibleList" v-bind="$attrs" v-on="$listeners">
+    <template #btnBarPrevBtn>
+      <el-button size="mini" @click="()=>$alert('btnBarPrevBtn插槽可自定义功能按钮')">自定义功能按钮</el-button>
+    </template>
     <template #columnFormatter="{row,prop}">
         <el-tag v-if="prop === 'jobno'">{{ row.jobno }}</el-tag>
         <span v-if="prop === 'personname'"><i class="el-icon el-icon-user" style="color: red"></i>{{ row.personname }}</span>