迭代vxe表格

src/components/Table/src/BasicTable.vue

@@ -51,13 +51,15 @@
         @cell-dblclick="dbclickVxeRow"
         @sort-change="sortChangeEvent"
         @resizable-change="resizableChangeEvent"
+        @radio-change="rowChange"
+        @checkbox-change="rowChange"
       >
         <template #empty>
           <div>
             <img src="../../../assets/images/nodata.png" />
           </div>
         </template>
-        <vxe-column type="checkbox" fixed="left" width="40"></vxe-column>
+        <vxe-column :type="getBindValues?.rowSelection?.type" fixed="left" width="40"></vxe-column>
         <vxe-column v-if="numberCol !== false" type="seq" title="序号" width="50"></vxe-column>
         <template
           v-for="(item, index) in getBindValues.columns"
@@ -182,7 +184,8 @@ export default defineComponent({
     'edit-change',
     'expanded-rows-change',
     'change',
-    'columns-change'
+    'columns-change',
+    'row-change'
   ],
   setup(props, { attrs, emit, slots, expose }) {
     const tableElRef = ref(null)
@@ -518,6 +521,10 @@ export default defineComponent({
     //     fetch()
     //   }
     // }
+    // vxetable 行监听
+    const rowChange = (data) => {
+      emit('row-change', data)
+    }
     return {
       vxeSetId,
       formRef,
@@ -549,7 +556,8 @@ export default defineComponent({
       resizeColumn,
       reload,
       updateCol,
-      numberCol
+      numberCol,
+      rowChange
     }
   },
 })

src/components/Table/src/props.ts

@@ -103,7 +103,7 @@ export const basicProps = {
   resizeHeightOffset: propTypes.number.def(0),
   rowSelection: {
     type: Object as PropType<TableRowSelection | null>,
-    default: null,
+    default: { type: 'checkbox' },
   },
   title: {
     type: [String, Function] as PropType<string | ((data: Recordable) => string)>,

src/views/operation/seaexport/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ds-sea-export-table p20">
     <div class="ds-table">
-      <BasicTable @register="registerTable" @rowDbClick="handledbclick">
+      <BasicTable @register="registerTable" @rowDbClick="handledbclick" @row-change="rowChange">
         <template #tableTitle>
           <TableActionBar :selectRow="getVxeSelectRows" :reload="reload" :columns="getColumns" :queryData="queryData">
             <!-- <tableActionBarRight :selectRow="getVxeSelectRows" :reload="reload"></tableActionBarRight> -->
@@ -504,6 +504,9 @@ const [registerTable, { reload, getVxeSelectRows, setLoading, getColumns }] = us
   indexColumnProps: {
     width: 60,
   },
+  rowSelection: {
+    type: 'radio'
+  },
   canResize: true,
   resizeHeightOffset: 131,
   immediate: false,
@@ -517,6 +520,9 @@ const [registerTable, { reload, getVxeSelectRows, setLoading, getColumns }] = us
   //   fixed: 'right'
   // }
 })
+const rowChange = (data) => {
+  console.log(data)
+}
 function editColumns(row) {
   if (row.mblno) {
     go(`/BookingDetail?id=${row.id}&source=edit&mblno=${row.mblno}`)