Forráskód Böngészése

fix: BsUi-表格列支持插槽

hanxiaohui 7 hónapja
szülő
commit
9715dfb209
1 módosított fájl, 26 hozzáadás és 3 törlés
  1. 26 3
      src/components/BsUi/Table/Table.vue

+ 26 - 3
src/components/BsUi/Table/Table.vue

@@ -13,7 +13,7 @@
           <slot name="searchRight"></slot>
         </template>
       </Search>
-<!--      <IndexData />-->
+      <!--      <IndexData />-->
     </template>
 
     <template #top>
@@ -69,21 +69,43 @@
         <bs-empty />
       </div>
     </template>
+
+    <!-- 自定义列插槽 -->
+    <template v-for="(name, idx) in slotCols" #[name]="scope" :key="idx">
+      <slot :name="name" v-bind="scope || {}" />
+    </template>
   </vxe-grid>
 </template>
 
 <script setup>
-  import { nextTick, onMounted, ref } from 'vue';
+  import { nextTick, onMounted, ref, useSlots } from 'vue';
   import Search from './component/search/index.vue';
   import Pagination from './component/pagination/index.vue';
   import Toolbar from './component/toolbar/index.vue';
   import IndexData from './component/indexData/index.vue';
+  import { mapValues, has, isString } from 'lodash';
   const props = defineProps(['gridOptions', 'searchConfig', 'pagerConfig', 'toolbarConfig', 'getGridRef', 'mounted']);
 
   const gridRef = ref(null);
 
   const isZoom = ref(false);
 
+  const slotCols = ref([]);
+
+  const setSlotsCols = () => {
+    slotCols.value = [];
+    props.gridOptions.columns.forEach((v) => {
+      if(has(v, 'slots')) {
+        mapValues(v.slots, (value, key) => {
+          if(isString(value)) {
+            slotCols.value.push(value);
+          }
+        })
+      }
+    });
+  }
+
+
   const handleReset = () => {};
 
   const handleSearch = () => {};
@@ -93,9 +115,10 @@
   };
 
   onMounted(() => {
+    setSlotsCols();
     nextTick(() => {
       props.getGridRef && props.getGridRef(gridRef.value);
-      props.mounted && props.mounted(gridRef.value)
+      props.mounted && props.mounted(gridRef.value);
     });
   });