feat: 调整分页样式，增加获取选中行方法

xingyu
1 parent 1fd90564
Showing 4 changed files with 62 additions and 12 deletions
yudao-ui-admin-vue3/src/components/XTable/src/XTable.vue
yudao-ui-admin-vue3/src/hooks/web/useVxeCrudSchemas.ts
yudao-ui-admin-vue3/src/hooks/web/useXTable.ts
yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts
@@ -229,19 +229,19 @@ const getPageConfig = (options: XTableProps) =&gt; {
     if (pagination != false) {
       options.pagerConfig = {
         border: false, // 带边框
-        background: true, // 带背景颜色
+        background: false, // 带背景颜色
         perfect: false, // 配套的样式
         pageSize: 10, // 每页大小
         pagerCount: 7, // 显示页码按钮的数量
         autoHidden: false, // 当只有一页时自动隐藏
         pageSizes: [5, 10, 20, 30, 50, 100], // 每页大小选项列表
         layouts: [
+          'Sizes',
           'PrevJump',
           'PrevPage',
-          'JumpNumber',
+          'Number',
           'NextPage',
           'NextJump',
-          'Sizes',
           'FullJump',
           'Total'
         ]
@@ -324,12 +324,47 @@ const getSearchData = () =&gt; {
   return queryParams
 }
+// 获取当前列
+const getCurrentColumn = () => {
+  const g = unref(xGrid)
+  if (!g) {
+    return
+  }
+  return g.getCurrentColumn()
+}
+
+// 获取当前选中列，redio
+const getRadioRecord = () => {
+  const g = unref(xGrid)
+  if (!g) {
+    return
+  }
+  return g.getRadioRecord(false)
+}
+
+// 获取当前选中列，checkbox
+const getCheckboxRecords = () => {
+  const g = unref(xGrid)
+  if (!g) {
+    return
+  }
+  return g.getCheckboxRecords(false)
+}
 const setProps = (prop: Partial<XTableProps>) => {
   innerProps.value = { ...unref(innerProps), ...prop }
 }
 defineExpose({ reload, Ref: xGrid, getSearchData, deleteData, exportList })
-emit('register', { reload, getSearchData, setProps, deleteData, exportList })
+emit('register', {
+  reload,
+  getSearchData,
+  setProps,
+  deleteData,
+  exportList,
+  getCurrentColumn,
+  getRadioRecord,
+  getCheckboxRecords
+})
 </script>
 <style lang="scss">
 @import './style/index.scss';
@@ -18,6 +18,7 @@ export type VxeCrudSchema = {
   primaryKey?: string // 主键ID
   primaryTitle?: string // 主键标题 默认为序号
   primaryType?: VxeColumnPropTypes.Type | 'id' // 还支持 "id" | "seq" | "radio" | "checkbox" | "expand" | "html" | null
+  firstColumn?: VxeColumnPropTypes.Type // 第一列显示类型
   action?: boolean // 是否开启表格内右侧操作栏插槽
   actionTitle?: string // 操作栏标题 默认为操作
   actionWidth?: string // 操作栏插槽宽度,一般2个字带图标 text 类型按钮 50-70
@@ -184,6 +185,14 @@ const filterSearchSchema = (crudSchema: VxeCrudSchema): VxeFormItemProps[] =&gt; {
 const filterTableSchema = (crudSchema: VxeCrudSchema): VxeGridPropTypes.Columns => {
   const { t } = useI18n()
   const tableSchema: VxeGridPropTypes.Columns = []
+  // 第一列
+  if (crudSchema.firstColumn) {
+    const tableSchemaItem = {
+      type: crudSchema.firstColumn,
+      width: '50px'
+    }
+    tableSchema.push(tableSchemaItem)
+  }
   // 主键ID
   if (crudSchema.primaryKey && crudSchema.primaryType) {
     const primaryTitle = crudSchema.primaryTitle ? crudSchema.primaryTitle : t('common.index')
@@ -2,10 +2,13 @@ import { ref, unref } from &#39;vue&#39;
 import { XTableProps } from '@/components/XTable/src/type'
 export interface tableMethod {
-  reload: () => void
+  reload: () => void // 刷新表格
   setProps: (props: XTableProps) => void
-  deleteData: (ids: string | number) => void
-  exportList: (fileName?: string) => void
+  deleteData: (ids: string | number) => void // 删除数据
+  exportList: (fileName?: string) => void // 导出列表
+  getCurrentColumn: () => void // 获取当前列
+  getRadioRecord: () => void // 获取当前选中列，redio
+  getCheckboxRecords: () => void //获取当前选中列， checkbox
 }
 export const useXTable = (props: XTableProps): [Function, tableMethod] => {
@@ -26,7 +29,10 @@ export const useXTable = (props: XTableProps): [Function, tableMethod] =&gt; {
     reload: () => getInstance().reload(),
     setProps: (props) => getInstance().setProps(props),
     deleteData: (ids: string | number) => getInstance().deleteData(ids),
-    exportList: (fileName?: string) => getInstance().exportList(fileName)
+    exportList: (fileName?: string) => getInstance().exportList(fileName),
+    getCurrentColumn: () => getInstance().getCheckboxRecords(),
+    getRadioRecord: () => getInstance().getRadioRecord(),
+    getCheckboxRecords: () => getInstance().getCheckboxRecords()
   }
   return [register, methods]
 }
@@ -76,20 +76,20 @@ VXETable.setup({
     },
     pagerConfig: {
       border: false,
-      background: true,
+      background: false,
       autoHidden: true,
       perfect: true,
       pageSize: 10,
       pagerCount: 7,
       pageSizes: [5, 10, 15, 20, 50, 100, 200, 500],
       layouts: [
+        'Sizes',
         'PrevJump',
         'PrevPage',
-        'Jump',
-        'PageCount',
+        'Number',
         'NextPage',
         'NextJump',
-        'Sizes',
+        'FullJump',
         'Total'
       ]
     }