click suffix icon to show options

src/views/tenant/index.vue

@@ -224,7 +224,8 @@
           </el-radio-group>
         </el-form-item>
         <template v-if="tenantSettingForm.mode==='3'">
-          <div class="data-source-item">
+          <div v-for="item in tenantSettingForm.datasourceList" :key="`${item.ip}-${item.port}-${item.name}`"
+               class="data-source-item">
             <div class="left">
               <div class="database-type">{{ "MySQL" }}</div>
               <div class="database-url">{{ "127.0.0.1" }} : {{ 3306 }}</div>
@@ -285,6 +286,7 @@ const total = ref(0);
 const title = ref("");
 const showTenantSetting = ref(false) /*是否显示租户设置对话框*/
 const tenantSettingRef = ref()
+const editDatasourceIndex = ref(-1)
 const data = reactive({
   form: {},
   queryParams: {
@@ -310,17 +312,17 @@ const data = reactive({
   },
   tenantSettingForm: {
     // TODO:
-    dataSource: [
-      {
-        type: "MySQL",
-        ip: "127.0.0.1",
-        port: "",
-        name: "",
-        username: "",
-        password: ""
-      }
-    ],
-    mode: '3'
+    // dataSource: [
+    //   {
+    //     type: "MySQL",
+    //     ip: "127.0.0.1",
+    //     port: "",
+    //     name: "",
+    //     username: "",
+    //     password: ""
+    //   }
+    // ],
+    // mode: '3'
   }
   ,
   tenantSettingRules: {
@@ -383,7 +385,14 @@ function reset() {
 const resetSettingTenant = () => {
   form.value = {
     /*TODO:*/
-    datasourceList: []
+    datasourceList: [{
+      type: null,
+      ip: null,
+      port: null,
+      name: null,
+      username: null,
+      password: null,
+    }]
   }
   tenantSettingRef.value?.resetFields()
 }
@@ -430,6 +439,7 @@ function handleUpdate(row) {
  * @param row
  */
 const handleSetting = (row) => {
+  // editDatasourceIndex.value = 0
   resetSettingTenant()
   getSetting(row.tenantId).then(resp => {
     tenantSettingForm.value = resp.data