fix: 表格demo修改

src/views/table-demo/index.vue

@@ -21,11 +21,19 @@
           <span>累计客户：XXX｜黑名单客户：XXX｜S级客户 </span>
         </a-space>
       </template>
+
+      <template #slotVue_default="{ row, column }">
+        <span style="color: blue">{{ row[column?.field] }}</span>
+      </template>
+
+      <template #opt1_default="{ row, column }">
+        <a-button type="primary" :disabled="true" size="small">编辑</a-button>
+      </template>
     </bs-table>
 
     <add-or-edit-drawer ref="addOrEditDrawerRef" />
     <demo-table-selector-modal ref="demoTableSelectorModal" />
-    <demo-base-modal ref="demoBaseModal"/>
+    <demo-base-modal ref="demoBaseModal" />
   </div>
 </template>
 
@@ -33,27 +41,26 @@
   import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
   import { onMounted, ref } from 'vue';
   import AddOrEditDrawer from '/@/views/table-demo/components/AddOrEditDrawer.vue';
-  import DemoTableSelectorModal from "/@/views/table-demo/components/DemoTableSelectorModal.vue";
-  import DemoBaseModal from "/@/views/table-demo/components/DemoBaseModal.vue";
+  import DemoTableSelectorModal from '/@/views/table-demo/components/DemoTableSelectorModal.vue';
+  import DemoBaseModal from '/@/views/table-demo/components/DemoBaseModal.vue';
 
   const addOrEditDrawerRef = ref(null);
   const demoTableSelectorModal = ref(null);
-  const demoBaseModal = ref(null)
+  const demoBaseModal = ref(null);
 
   const openModal = () => {
     demoTableSelectorModal.value.showModal();
-  }
+  };
 
   const openModalBase = () => {
-    console.log("demoBaseModal", demoBaseModal)
+    console.log('demoBaseModal', demoBaseModal);
 
     demoBaseModal.value.showModal();
-  }
-
+  };
 
   const handleRefreshTable = () => {
     fetchTableData({ a: new Date() });
-  }
+  };
 
   const handleEdit = (row) => {
     addOrEditDrawerRef.value.showDrawer({
@@ -69,7 +76,7 @@
     fetchTableData,
   } = useBsTable({
     tableOptions: {
-      url: "/api/get-table",
+      url: '/api/get-table',
       gridOptions: {
         loading: false,
         columns: [
@@ -81,6 +88,13 @@
             field: 'id',
             title: 'ID',
           },
+          {
+            field: 'slotVue',
+            title: '插槽Vue写法',
+            slots: {
+              default: 'slotVue_default',
+            },
+          },
           {
             field: 'dictField',
             title: '字典',
@@ -100,7 +114,7 @@
           },
           {
             field: 'opt',
-            title: '操作',
+            title: '操作JSX写法',
             width: '120px',
             fixed: 'right',
             visible: true,
@@ -121,6 +135,15 @@
               },
             },
           },
+          {
+            field: 'opt1',
+            title: '操作Vue插槽写法',
+            width: '120px',
+            fixed: 'right',
+            slots: {
+              default: 'opt1_default',
+            },
+          },
         ],
         data: [
           {
@@ -135,6 +158,7 @@
                 status: 1,
                 valueCode: '03',
                 valueName: '微信公众号',
+                slotVue: '1111',
               },
             ],
           },
@@ -162,8 +186,8 @@
       toolbarConfig: {},
       // 每次查询接口之前，都会调用这个回调函数
       tableSearchBeforeBiz() {
-        const searchParams = getValue("searchConfig.data");
-        setValue("searchConfig.data", {...searchParams, otherField: "abc"})
+        const searchParams = getValue('searchConfig.data');
+        setValue('searchConfig.data', { ...searchParams, otherField: 'abc' });
       },
       // 表格初始化之前,只加载一次
       beforeMount() {
@@ -176,9 +200,8 @@
     },
   });
 
-
   const openEditDrawer = () => {
-    addOrEditDrawerRef.value.showDrawer({type: 'add', row: null});
+    addOrEditDrawerRef.value.showDrawer({ type: 'add', row: null });
   };
 </script>