feat(组件): 🎉 组件新增

新增一对多组件和多对多组件

web/src/components/foreignKey/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <!--   你的自定义受控组件-->
+  <div>
+    <el-tag :type="randomType">{{ data }}</el-tag>
+  </div>
+</template>
+<script lang="ts" setup>
+import {watch, ref} from "vue";
+
+const props = defineProps({
+  modelValue: String || Object,
+  displayLabel: {
+    type:String,
+    default: ""
+  }
+})
+
+// template上使用data
+const data = ref()
+watch(() => {
+      return props.modelValue
+    }, // 监听modelValue的变化，
+    (value) => {
+      if (typeof value === "string") {
+        data.value = value
+      } else if (typeof value === "object") {
+        const {displayLabel} = props
+        data.value = value ? value[displayLabel] : null
+      } else {
+        data.value = null
+      }
+
+    }, // 当modelValue值触发后，同步修改data.value的值
+    {immediate: true} // 立即触发一次，给data赋值初始值
+)
+
+const tagType = ['success', 'info', 'warning', 'danger']
+const randomType = (): string => {
+  return tagType[Math.floor(Math.random() * tagType.length)];
+}
+</script>

web/src/components/manyToMany/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <!--   你的自定义受控组件-->
+  <div>
+    <el-tag class="many-to-many-tag" :type="randomType" v-for="(item,index) in data" :key="index">{{item}}</el-tag>
+  </div>
+</template>
+<script lang="ts" setup>
+import {watch, ref} from "vue";
+
+const props = defineProps({
+  modelValue: Array,
+  bindValue: Array,
+  displayLabel: {
+    type:String,
+    default: ""
+  }
+})
+
+// template上使用data
+const data = ref()
+watch(() => {
+      return props.bindValue
+    }, // 监听modelValue的变化，
+    (value) => {
+      const {displayLabel} = props
+      const result = value ? value.map((item: any) => {
+        return item[displayLabel]
+      }) : null
+      data.value = result
+    }, // 当modelValue值触发后，同步修改data.value的值
+    {immediate: true} // 立即触发一次，给data赋值初始值
+)
+
+const tagType = ['success', 'info', 'warning', 'danger']
+const randomType = (): string => {
+  return tagType[Math.floor(Math.random() * tagType.length)];
+}
+</script>
+<style scoped>
+.many-to-many-tag{
+  margin-right: 5px;
+}
+.many-to-many-tag:last-child {
+  margin-right: 0;
+}
+</style>