nestedListGroup

src/components/CtForm/index.vue

@@ -56,6 +56,12 @@
                 :item="item"
                 @change="handleChange(item)"
               ></textareaUI>
+              <nestedListGroupUI
+                v-if="item.type === 'nestedListGroup'"
+                v-model="item.value"
+                :item="item"
+                @change="handleChange(item)"
+              ></nestedListGroupUI>
               <DatePicker v-if="item.type === 'datePicker'" v-model="item.value" :options="item.options" :width="item.width" :class="item.class"></DatePicker>
               
               <template v-if="item.slotName">
@@ -78,6 +84,7 @@ import comboboxZhAndEnUI from './../FormUI/comboboxZhAndEn'
 import radioGroupUI from './../FormUI/radioGroup'
 import checkboxUI from './../FormUI/checkbox'
 import textareaUI from './../FormUI/textArea'
+import nestedListGroupUI from './../FormUI/nestedListGroup'
 import DatePicker from '@/components/DatePicker'
 import { ref, defineEmits, defineExpose } from 'vue'
 const emit = defineEmits(['change', 'inputUpdateAutocomplete'])// 定义一个或多个自定义事件

src/components/FormUI/nestedListGroup/components/listGroup.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-list class="side-box" color="primary">
+    <template v-for="(val, index) in item.items" :key="item?.itemValue? val[item.itemValue] : index">
+      <template v-if="!val.children?.length">
+        <v-list-item
+          active-class="active"
+          color="primary"
+          :title="val[item.itemText || 'label']"
+        >
+        </v-list-item>
+      </template>
+      <v-list-group
+        v-else
+        color="primary"
+        :prepend-icon="val.icon"
+      >
+        <template v-slot:activator="{ props }">
+          <v-list-item v-bind="props" :title="val[item.itemText || 'label']"></v-list-item>
+        </template>
+        <v-list-item
+          v-for="(k, i) in val.children"
+          :key="`k_${i}`"
+          color="primary"
+          style="padding-left: 40px;"
+          :title="k[item.itemText || 'label']"
+          :value="k[item.itemValue || 'value']"
+        ></v-list-item>
+      </v-list-group>
+    </template>
+  </v-list>
+</template>
+
+<script setup>
+defineOptions({ name:'nestedListGroup-listGroup'})
+const propsData = defineProps({item: Object})
+const item = propsData.item
+</script>
+<style lang="scss" scoped>
+</style>

src/components/FormUI/nestedListGroup/index.vue

@@ -0,0 +1,82 @@
+<!-- 嵌套列表 -->
+<template>
+  <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
+    <v-menu :close-on-content-click="closeOnContentClick">
+      <template v-slot:activator="{ props }">
+        <v-text-field
+          v-model="value"
+          v-bind="props"
+          variant="outlined"
+          :density="item.dense || 'compact'"
+          :type="item.type"
+          :rules="item.rules"
+          :disabled="item.disabled"
+          :style="{width: item.width}"
+          :color="item.color || 'primary'"
+          :label="item.label"
+          :placeholder="item.placeholder || item.label"
+          :autofocus="item.autofocus"
+          :required="item.required"
+          :class="item.class"
+          :suffix="item.suffix"
+          :append-icon="item.appendIcon"
+          :append-inner-icon="item.appendInnerIcon"
+          :clearable="item.clearable"
+          :readonly="item.readonly"
+          :counter="item.counter"
+          :prepend-inner-icon="item.prependInnerIcon"
+          hide-spin-buttons
+          :hide-details="item.hideDetails || false"
+          @update:modelValue="modelValueUpDate"
+        ></v-text-field>
+      </template>
+      <v-list class="side-box" color="primary">
+        <template v-for="(val, index) in item.items" :key="item?.itemValue? val[item.itemValue] : index">
+          <template v-if="!val.children?.length">
+            <v-list-item
+              active-class="active"
+              color="primary"
+              :title="val[item.itemText || 'label']"
+            >
+            </v-list-item>
+          </template>
+          <v-list-group
+            v-else
+            color="primary"
+            :prepend-icon="val.icon"
+          >
+            <template v-slot:activator="{ props }">
+              <v-list-item v-bind="props" :title="val[item.itemText || 'label']"></v-list-item>
+            </template>
+            <v-list-item
+              v-for="(k, i) in val.children"
+              :key="`k_${i}`"
+              color="primary"
+              style="padding-left: 40px;"
+              :title="k[item.itemText || 'label']"
+              :value="k[item.itemValue || 'value']"
+            ></v-list-item>
+          </v-list-group>
+        </template>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+
+<script setup>
+import { defineEmits, ref } from 'vue';
+defineOptions({ name:'FormUI-nestedListGroup'})
+const propsData = defineProps({item: Object, modelValue: [String, Number]})
+const item = propsData.item
+const value = ref(propsData.modelValue)
+const emit = defineEmits(['update:modelValue', 'change'])
+const modelValueUpDate = (val) => {
+  value.value = val
+  emit('update:modelValue', value.value)
+  emit('change', value.value)
+}
+const closeOnContentClick = ref(false) // multiple
+</script>
+<style lang="scss" scoped>
+</style>
+