fix:解决冲突

src/components/DataTable/index.vue

@@ -2,18 +2,23 @@
   <div>
     <a-table :columns="columns" :data="data" :row-key="rowKey" :loading="loading" :pagination="false"
       @sorter-change="handleSorterChange" @select="handleSelect" @select-all="handleSelectAll" @expand="handleExpand">
-      <template v-for="column in columns" v-if="column.slotName" :key="column.slotName"
-        v-slot:[column.slotName]="{ record, rowIndex, column }">
-        <slot :name="column.slotName" v-bind="{ record, rowIndex, column }"></slot>
+      <template v-for="item in columns" :key="item.slotName" #[item.slotName]="{ record, rowIndex, column }">
+        <slot :name="item.slotName" v-bind="{ record, rowIndex, column }"></slot>
+      </template>
+      <template v-for="item in columns" :key="item.titleSlotName" #[item.titleSlotName]="{ record, rowIndex, column }">
+        <a-popover :content="item.titleTip"
+          :content-style="{ fontSize: '13px', padding: '10px 14px', fontWeight: 500 }">
+          <div class="title-tip">{{ item.title }}</div>
+        </a-popover>
       </template>
     </a-table>
-    <a-pagination :current="pagination.current" :total="pagination.total" :page-size="pagination.pageSize"
-      @change="handlePageChange" @show-size-change="handleSizeChange" />
+    <a-pagination class="pagination" v-if="pagination.total" :current="pagination.current" :total="pagination.total"
+      :page-size="pagination.pageSize" @change="handlePageChange" @show-size-change="handleSizeChange" />
   </div>
 </template>
 
 <script setup>
-import { ref, defineProps, defineEmits } from 'vue';
+import { toRefs, defineProps, defineEmits } from 'vue';
 
 // 定义接收的 props
 const props = defineProps({
@@ -24,6 +29,8 @@ const props = defineProps({
   pagination: Object
 });
 
+const { data, columns, rowKey, loading, pagination } = toRefs(props);
+
 // 定义 emit 事件
 const emit = defineEmits(['sorterChange', 'select', 'selectAll', 'expand', 'pageChange', 'sizeChange']);
 
@@ -55,3 +62,7 @@ const handleExpand = (expanded, record) => {
   emit('expand', expanded, record);
 };
 </script>
+
+<style lang="css" scoped>
+.pagination {}
+</style>

src/views/permission/PermissionAccount.vue

@@ -9,6 +9,7 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
 import ContentContainer from '../layout/ContentContainer.vue';
 import BreadCrumbMenu from '../common/BreadCrumbMenu.vue';
 import DataTable from '@/components/DataTable/index.vue';
@@ -20,8 +21,11 @@ const tableData = ref([
 ]);
 
 const tableColumns = ref([
-  { title: '姓名', dataIndex: 'name', slotName: 'nameSlot' },
-  { title: '年龄', dataIndex: 'age', slotName: 'ageSlot' },
+  { title: '用户名', dataIndex: 'name', titleSlotName: 'nameSlot' },
+  { title: '角色', dataIndex: 'age', titleSlotName: 'ageSlot' },
+  { title: '所属部门', dataIndex: 'dept', titleSlotName: 'deptSlot' },
+  { title: '状态', dataIndex: 'status', titleSlotName: 'statusSlot' },
+  { title: '操作', dataIndex: 'operation', titleSlotName: 'operationSlot' },
 ]);
 
 const isLoading = ref(false);