更新数据

src/components/aboutTable/MyTable.vue

@@ -1,12 +1,10 @@
 <template>
-  <div style="width: 100%">
+  <div style="width: 100%"  :class="getConfiger.showSelectType === 'radio' ? 'tabBoxRadio' : ''">
     <!-- hasChildren要在tableData中定义表示当前行有没有下一级 children要在tableData中定义表示下一级的数据-->
     <el-table
       ref="multipleTableRef"
       :data="tableData"
       @selection-change="handleSelectionChange"
-      @current-change="handleCurrentChange"
-      @row-click="singleElection"
       :row-key="getConfiger.rowKey"
       :border="getConfiger.border"
       :default-expand-all="getConfiger.defaultExpandAll"
@@ -21,23 +19,7 @@
       :highlight-current-row="getConfiger.showSelectType === 'radio'"
       :row-style="{ height: getConfiger.rowHeight === 'auto'  ? getConfiger.rowHeight : getConfiger.rowHeight + 'px'}"
     >
-      <el-table-column
-        type="selection"
-        width="55"
-        v-if="getConfiger.showSelectType === 'checkBox'"
-      />
-      <el-table-column
-        width="55"
-        v-else-if="getConfiger.showSelectType === 'radio'"
-        #default="{ row }"
-      >
-        <el-radio
-          class="radio"
-          v-model="getConfiger.radioChoose"
-          :label="row[getConfiger.rowKey]"
-          >&nbsp;</el-radio
-        >
-      </el-table-column>
+      <el-table-column type="selection" width="55"  />
       <el-table-column
         type="index"
         label="序号"
@@ -148,19 +130,16 @@ onMounted(() => {
 });
 // 可选的时候选择的数据
 const handleSelectionChange = (val) => {
-  emit("chooseData", val);
-};
-// 单选的时候选择的数据
-const handleCurrentChange = (val) => {
-  currentRow.value = val;
-  emit("chooseData", val);
-};
-const singleElection = (val) => {
-  if (getConfiger.showSelectType === "radio") {
-    getConfiger.radioChoose = val[getConfiger.rowKey];
+  if(getConfiger.showSelectType === 'radio' && val.length > 1){
+    let del_row = val.shift();
+    multipleTableRef.value.toggleRowSelection(del_row, false);
+    currentRow.value = val;
+    emit("chooseData", val);
+  }else{
     emit("chooseData", val);
   }
 };
+
 // 懒加载数据的方法
 const load = (date, treeNode, resolve) => {
   setTimeout(() => {
@@ -184,25 +163,14 @@ const load = (date, treeNode, resolve) => {
 function setDefaultChoose() {
   nextTick(() => {
     // 多选的默认选中
-    if (
-      props.tableConfiger.defaultSelectKeys?.length > 0 &&
-      props.tableConfiger.showSelectType === "checkBox"
-    ) {
+    if ( props.tableConfiger.defaultSelectKeys?.length > 0 &&  props.tableConfiger.showSelectType === "checkBox" ) {
       props.tableData.forEach((item) => {
-        if (
-          props.tableConfiger.defaultSelectKeys.findIndex(
-            (v) => v === item[props.tableConfiger.rowKey]
-          ) > -1
-        ) {
+        if (  props.tableConfiger.defaultSelectKeys.findIndex( (v) => v === item[props.tableConfiger.rowKey] ) > -1) {
           multipleTableRef.value.toggleRowSelection(item, true);
         }
       });
       // 单选的默认选中
-    } else if (
-      props.tableConfiger.defaultSelectKeys &&
-      props.tableConfiger.defaultSelectKeys?.length > 0 &&
-      props.tableConfiger.showSelectType === "radio"
-    ) {
+    } else if ( props.tableConfiger.defaultSelectKeys && props.tableConfiger.defaultSelectKeys?.length > 0 && props.tableConfiger.showSelectType === "radio"  ) {
       getConfiger.radioChoose = props.tableConfiger.defaultSelectKeys[0];
     }
   });
@@ -212,3 +180,12 @@ function setDefaultChoose() {
 <style lang = "scss">
 
 </style>
+<style>
+.tabBoxRadio .el-checkbox__inner {
+  border-radius: 50% !important;
+}
+.tabBoxRadio .el-table__header-wrapper .el-checkbox {
+  display: none;
+}
+
+</style>