添加数据字典模糊查询高亮

src/pages/dataCenter/dictionary1/WebDic.js

@@ -50,6 +50,7 @@ const WebDic = () => {
     const [flag1, setFlag1] = useState(0);//搜索框数据是否刷新
     const [isloading, setIsloading] = useState(false)
     const history = useHistory();
+    const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
 
     const [InPutVisible, setInPutVisible] = useState(false);
 
@@ -70,6 +71,7 @@ const WebDic = () => {
             title: () => (<span className={styles.font}>名称</span>),
             dataIndex: 'nodeName',
             key: 'nodeName',
+            render: item => searchStyle(item),
         },
         {
             title: () => (<span className={styles.font}>操作</span>),
@@ -281,6 +283,21 @@ const WebDic = () => {
         }
     ]
 
+    // 模糊查询匹配的样式
+    const searchStyle = val => {
+        let n;
+        if (showSearchStyle) {
+            n = val.replace(
+                new RegExp(searchWord, 'g'),
+                `<span style='color:red'>${searchWord}</span>`,
+            );
+        } else {
+            n = val;
+        }
+        console.log(n)
+        return <div dangerouslySetInnerHTML={{ __html: n }} />;
+    };
+
     const setRowClassName = record => {
         return record.nodeID === selectColor.nodeID ? styles.clickRowStyle : '';
     }
@@ -633,6 +650,7 @@ const WebDic = () => {
     const submitSearchUser = () => {
         SearchDataDictionaryList({ key: searchWord, type: 1 }).then(res => {
             if (res.code === 0) {
+                setShowSearchStyle(true);
                 if (res.data.length == 0) {
                     setData(res.data)
                     setSubData([])
@@ -670,9 +688,11 @@ const WebDic = () => {
                 setSelectColor(res[0]);
                 setSelectID(res[0].nodeID); // 设置选中的一级条目ID，用于添加二级条目
                 getData(res[0].nodeID);//拿到nodeID再次调用接口就回直接进入下面的循环，靠nodeID获取子节点二级条目
+                setShowSearchStyle(false);
             }
             setLoading(false)
             setIsloading(false)
+            
         });
     }