improve the select component on the page of workflow relation (#13805)

Author: calvinjiang

Diff for: dolphinscheduler-ui/src/views/projects/workflow/relation/index.tsx

@@ -15,10 +15,10 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, toRefs, watch } from 'vue'
+import { defineComponent, onMounted, toRefs, watch, VNode, h } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
-import { NSelect, NButton, NIcon, NSpace, NTooltip } from 'naive-ui'
+import { NSelect, NButton, NIcon, NSpace, NTooltip, SelectOption } from 'naive-ui'
 import { ReloadOutlined, EyeOutlined } from '@vicons/antd'
 import { useRelation } from './use-relation'
 import Card from '@/components/card'
@@ -48,14 +48,20 @@ const workflowRelation = defineComponent({
         : getWorkflowList(Number(route.params.projectCode))
     }
 
+    const renderOption = ({ node, option }: { node: VNode; option: SelectOption }) =>
+      h(NTooltip, null, {
+        trigger: () => node,
+        default: () => option.label
+      })
+
     watch(
       () => [variables.workflow, variables.labelShow, locale.value],
       () => {
         handleResetDate()
       }
     )
 
-    return { t, handleResetDate, ...toRefs(variables) }
+    return { t, handleResetDate, ...toRefs(variables), renderOption }
   },
   render() {
     const { t, handleResetDate } = this
@@ -86,10 +92,12 @@ const workflowRelation = defineComponent({
               <NSpace>
                 <NSelect
                   clearable
+                  filterable
                   style={{ width: '300px' }}
                   placeholder={t('project.workflow.workflow_name')}
                   options={this.workflowOptions}
                   v-model={[this.workflow, 'value']}
+                  renderOption={this.renderOption}
                 />
                 <NTooltip trigger={'hover'}>
                   {{