fix(查询组件): 多选优化

dataeaseShu · xuwei-fit2cloud · commit 0fb9b9d13572 · 2025-04-29T17:27:04.000+08:00
diff --git a/core/core-frontend/src/custom-component/v-query/Component.vue b/core/core-frontend/src/custom-component/v-query/Component.vue
@@ -914,7 +914,8 @@ const autoStyle = computed(() => {
   position: relative;
   --ed-font-size-base: v-bind(boxWidth);
 
-  :deep(.ed-select-v2 .ed-select-v2__selection .ed-tag) {
+  :deep(.ed-select-v2 .ed-select-v2__selection .ed-tag),
+  :deep(.select-trigger .ed-select__tags .ed-tag) {
     background-color: v-bind(tagColor);
   }
 
diff --git a/core/core-frontend/src/custom-component/v-query/Select.vue b/core/core-frontend/src/custom-component/v-query/Select.vue
@@ -638,6 +638,14 @@ onMounted(() => {
     Boolean(document.querySelector('.datav-preview'))
 })
 
+const tagWidth = computed(() => {
+  return Math.min(getCustomWidth() / 3, 40) + 'px'
+})
+
+const tagTextWidth = computed(() => {
+  return Math.min(getCustomWidth() / 3, 50) - 25 + 'px'
+})
+
 defineExpose({
   displayTypeChange,
   mult,
@@ -730,3 +738,15 @@ defineExpose({
   }
 }
 </style>
+
+<style lang="less" scoped>
+:deep(.ed-select-v2__selection) {
+  .ed-tag {
+    max-width: v-bind(tagWidth);
+  }
+
+  .ed-select__tags-text {
+    max-width: v-bind(tagTextWidth) !important;
+  }
+}
+</style>
diff --git a/core/core-frontend/src/custom-component/v-query/Tree.vue b/core/core-frontend/src/custom-component/v-query/Tree.vue
@@ -135,6 +135,18 @@ const init = () => {
   getTreeOption()
 }
 
+const tagWidth = computed(() => {
+  return Math.min(getCustomWidth() / 3, 50) + 'px'
+})
+
+const tagsWidth = computed(() => {
+  return getCustomWidth() - 40 + 'px'
+})
+
+const tagTextWidth = computed(() => {
+  return Math.min(getCustomWidth() / 3, 50) - 25 + 'px'
+})
+
 const showOrHide = ref(true)
 const queryConditionWidth = inject('com-width', Function, true)
 const isConfirmSearch = inject('is-confirm-search', Function, true)
@@ -314,4 +326,15 @@ const selectStyle = computed(() => {
 :deep(.ed-select-tags-wrapper) {
   display: inline-flex !important;
 }
+
+:deep(.ed-select__tags) {
+  max-width: v-bind(tagsWidth) !important;
+  .ed-tag {
+    max-width: v-bind(tagWidth);
+  }
+
+  .ed-select__tags-text {
+    max-width: v-bind(tagTextWidth) !important;
+  }
+}
 </style>

Original file line number	Diff line number	Diff line change
`@@ -914,7 +914,8 @@ const autoStyle = computed(() => {`
`914`	`914`	`position: relative;`
`915`	`915`	`--ed-font-size-base: v-bind(boxWidth);`
`916`	`916`
`917`		`- :deep(.ed-select-v2 .ed-select-v2__selection .ed-tag) {`
	`917`	`+ :deep(.ed-select-v2 .ed-select-v2__selection .ed-tag),`
	`918`	`+ :deep(.select-trigger .ed-select__tags .ed-tag) {`
`918`	`919`	`background-color: v-bind(tagColor);`
`919`	`920`	`}`
`920`	`921`