✨(table): 新增 type 属性 radio 值 与 selectedKey 属性, 用于支持单选

package/component/src/component/table/TableRow.vue

@@ -19,6 +19,7 @@ export interface LayTableRowProps {
   expandSpace: boolean;
   expandIndex: number;
   selectedKeys: Recordable[];
+  selectedKey: any;
   tableColumnKeys: Recordable[];
   childrenColumnName?: string;
   columns: Recordable[];
@@ -37,6 +38,7 @@ const emit = defineEmits([
   "row-double",
   "contextmenu",
   "update:selectedKeys",
+  "update:selectedKey",
 ]);
 
 const props = withDefaults(defineProps<LayTableRowProps>(), {
@@ -55,6 +57,15 @@ const tableSelectedKeys: WritableComputedRef<Recordable[]> = computed({
   },
 });
 
+const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
+  get() {
+    return props.selectedKey;
+  },
+  set(val) {
+    emit("update:selectedKey", val);
+  },
+});
+
 const isExpand = ref(false);
 const slotsData = ref<string[]>([]);
 
@@ -182,6 +193,57 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
     <template v-for="(column, columnIndex) in columns" :key="columnIndex">
       <!-- 展示否 -->
       <template v-if="tableColumnKeys.includes(column.key)">
+
+        <template v-if="column.type == 'radio'">
+          <td
+            class="layui-table-cell"
+            :style="[
+              {
+                textAlign: column.align,
+                whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
+              },
+              renderFixedStyle(column, columnIndex),
+              renderCellStyle(data, column, index, columnIndex),
+            ]"
+            :class="[
+              renderFixedClassName(column, columnIndex),
+              renderCellClassName(data, column, index, columnIndex),
+              column.fixed ? `layui-table-fixed-${column.fixed}` : '',
+            ]"
+          >
+            <!-- 树表占位与缩进 -->
+            <span
+              v-if="expandSpace && columnIndex === expandIndex"
+              :style="{ 'margin-right': currentIndentSize + 'px' }"
+            ></span>
+
+            <span
+              v-if="
+                expandSpace &&
+                !data[childrenColumnName] &&
+                !slot.expand &&
+                columnIndex === expandIndex
+              "
+              class="layui-table-cell-expand-icon-spaced"
+            ></span>
+
+            <lay-icon
+              v-if="
+                (slot.expand || data[childrenColumnName]) &&
+                columnIndex === expandIndex
+              "
+              class="layui-table-cell-expand-icon"
+              :type="expandIconType"
+              @click="handleExpand"
+            ></lay-icon>
+
+            <lay-radio
+              v-model="tableSelectedKey"
+              :value="data[id]"
+            />
+          </td>
+        </template>
+
         <template v-if="column.type == 'checkbox'">
           <td
             class="layui-table-cell"

package/component/src/component/table/index.vue

@@ -14,6 +14,8 @@ import {
   onMounted,
   onUpdated,
   StyleValue,
+  WritableComputedRef,
+computed,
 } from "vue";
 import { v4 as uuidv4 } from "../../utils/guidUtil";
 import { Recordable } from "../../types";
@@ -31,13 +33,14 @@ export interface LayTableProps {
   columns: Recordable[];
   dataSource: Recordable[];
   defaultToolbar?: boolean;
+  selectedKey?: any;
   selectedKeys?: Recordable[];
   indentSize?: number;
   childrenColumnName?: string;
   height?: number;
   maxHeight?: string;
   even?: boolean;
-  expandIndex: number;
+  expandIndex?: number;
   rowClassName?: string | Function;
   cellClassName?: string | Function;
   rowStyle?: string | Function;
@@ -67,6 +70,7 @@ const emit = defineEmits([
   "change",
   "row-double",
   "update:selectedKeys",
+  "update:selectedKey",
   "contextmenu",
 ]);
 
@@ -86,6 +90,15 @@ const tableColumnKeys = ref(
   })
 );
 
+const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
+  get() {
+    return props.selectedKey;
+  },
+  set(val) {
+    emit("update:selectedKey", val);
+  },
+});
+
 watch(
   () => props.dataSource,
   () => {
@@ -484,6 +497,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
                   @row-double="rowDoubleClick"
                   @contextmenu="contextmenu"
                   v-model:selectedKeys="tableSelectedKeys"
+                  v-model:selectedKey="tableSelectedKey" 
                 >
                   <template v-for="name in slotsData" #[name]="{ data }">
                     <slot :name="name" :data="data"></slot>