support to resize the columns (#13123)

dolphinscheduler-ui/src/views/projects/task/definition/use-table.ts

@@ -67,6 +67,9 @@ export function useTable(onEdit: Function) {
         title: t('project.task.task_name'),
         key: 'taskName',
         ...COLUMN_WIDTH_CONFIG['linkName'],
+        resizable: true,
+        minWidth: 200,
+        maxWidth: 600,
         render: (row: IRecord) =>
           h(
             ButtonLink,
@@ -75,18 +78,23 @@ export function useTable(onEdit: Function) {
             },
             {
               default: () =>
-                h(
+                  h(
-                  NEllipsis,
+                      NEllipsis,
-                  COLUMN_WIDTH_CONFIG['linkEllipsis'],
+                      {
-                  () => row.taskName
+                        style: 'max-width: 580px;line-height: 1.5'
-                )
+                      },
+                      () => row.taskName
+                  )
             }
           )
       },
       {
         title: t('project.task.workflow_name'),
         key: 'processDefinitionName',
-        ...COLUMN_WIDTH_CONFIG['name']
+        ...COLUMN_WIDTH_CONFIG['name'],
+        resizable: true,
+        minWidth: 200,
+        maxWidth: 600
       },
       {
         title: t('project.task.workflow_state'),

dolphinscheduler-ui/src/views/projects/task/instance/use-table.ts

@@ -95,12 +95,18 @@ export function useTable() {
       {
         title: t('project.task.task_name'),
         key: 'name',
-        ...COLUMN_WIDTH_CONFIG['name']
+        ...COLUMN_WIDTH_CONFIG['name'],
+        resizable: true,
+        minWidth: 200,
+        maxWidth: 600,
       },
       {
         title: t('project.task.workflow_instance'),
         key: 'processInstanceName',
         ...COLUMN_WIDTH_CONFIG['linkName'],
+        resizable: true,
+        minWidth: 300,
+        maxWidth: 600,
         render: (row: {
           processInstanceId: number
           processInstanceName: string
@@ -119,7 +125,9 @@ export function useTable() {
               default: () =>
                 h(
                   NEllipsis,
-                  COLUMN_WIDTH_CONFIG['linkEllipsis'],
+                    {
+                      style: 'max-width: 580px;line-height: 1.5'
+                    },
                   () => row.processInstanceName
                 )
             }

dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts

@@ -85,6 +85,10 @@ export function useTable() {
         key: 'name',
         ...COLUMN_WIDTH_CONFIG['linkName'],
         className: 'workflow-name',
+        resizable: true,
+        width: 300,
+        minWidth: 300,
+        maxWidth: 600,
         render: (row: IWorkflowInstance) =>
           h(
             ButtonLink,
@@ -98,11 +102,13 @@ export function useTable() {
             },
             {
               default: () =>
-                h(
+                  h(
-                  NEllipsis,
+                      NEllipsis,
-                  COLUMN_WIDTH_CONFIG['linkEllipsis'],
+                      {
-                  () => row.name
+                        style: 'max-width: 580px;line-height: 1.5'
-                )
+                      },
+                      () => row.name
+                  )
             }
           )
       },