diff --git a/dolphinscheduler-ui-next/src/views/datasource/datasource-list/json-highlight.tsx b/dolphinscheduler-ui-next/src/views/datasource/datasource-list/json-highlight.tsx
index 474e3caf2..0dbf5fc46 100644
--- a/dolphinscheduler-ui-next/src/views/datasource/datasource-list/json-highlight.tsx
+++ b/dolphinscheduler-ui-next/src/views/datasource/datasource-list/json-highlight.tsx
@@ -21,18 +21,18 @@ import { isBoolean, isNumber, isPlainObject } from 'lodash'
 import styles from './json-highlight.module.scss'
 
 const props = {
-  json: {
-    type: String as PropType<string>,
-    default: ''
+  rowData: {
+    type: Object as PropType<object>,
+    default: {}
   }
 }
 
 const JsonHighlight = defineComponent({
   name: 'JsonHighlight',
   props,
-  render() {
+  render(props: { rowData: { connectionParams: string } }) {
     return (
-      <pre class={styles['json-highlight']}>{syntaxHighlight(this.json)}</pre>
+      <pre class={styles['json-highlight']}>{syntaxHighlight(props.rowData.connectionParams)}</pre>
     )
   }
 })
diff --git a/dolphinscheduler-ui-next/src/views/datasource/datasource-list/use-columns.ts b/dolphinscheduler-ui-next/src/views/datasource/datasource-list/use-columns.ts
index 57ec39cf9..a78c03830 100644
--- a/dolphinscheduler-ui-next/src/views/datasource/datasource-list/use-columns.ts
+++ b/dolphinscheduler-ui-next/src/views/datasource/datasource-list/use-columns.ts
@@ -64,7 +64,7 @@ export function useColumns(onCallback: Function) {
                 }
               ),
             default: () =>
-              h(JsonHighlight, { json: rowData.connectionParams }, null)
+              h(JsonHighlight, { rowData })
           }
         )
       }