效果预览修改

src/views/codeRule/ConditionsSet.vue

@@ -101,7 +101,7 @@
                 <div v-for="(item, index) in linkListData" :key="index" class="link-item" :class="{ clicked: item.clicked }" @click="toggleClick(item, index)">
                     <i class="el-icon-close" @click.stop="handleDeleteLinkItem(item,index)"></i>
                     <div class="link-name">
-                        <span>{{ item.name }}</span>
+                        <span>{{ item.symbolName }}</span>
                     </div>
                   <div>
                        <i class="el-icon-connection" style="color: black; font-size: larger;"></i>
@@ -397,7 +397,7 @@ export default {
       saveCondition() {
 
         const filteredArr = this.paramList.filter(item => item.standardInfos.length !== 0);
-        console.log(this.linkListData,'this.linkListData');
+        console.log(filteredArr,'this.linkListData');
         
         this.linkListData = JSON.parse(JSON.stringify(filteredArr));
 
@@ -572,6 +572,11 @@ export default {
     .code-item{
         margin-right: 5px;
         margin-top: 5px;
+          flex-shrink: 0; // 防止元素在Flex容器中收缩
+         min-width: 100px; 
+         max-width: 200px;
+         overflow-x: auto;
+         white-space: nowrap;
 
     }
 }

src/views/codeRule/LinkEle.vue

@@ -100,7 +100,7 @@
                 <div v-for="(item, index) in linkListData" :key="index" class="link-item" :class="{ clicked: item.clicked }" @click="toggleClick(item, index)">
                     <i class="el-icon-close" @click.stop="handleDeleteLinkItem(item,index)"></i>
                     <div class="link-name">
-                        <span>{{ item.name }}</span>
+                        <span>{{ item.symbolName }}</span>
                     </div>
                   <div>
                        <i class="el-icon-connection" style="color: black; font-size: larger;"></i>
@@ -627,9 +627,13 @@ export default {
     display: flex;
             font-weight: bold;
     .code-item{
-        margin-right: 5px;
+           margin-right: 5px;
         margin-top: 5px;
-
+          flex-shrink: 0; // 防止元素在Flex容器中收缩
+         min-width: 100px; 
+         max-width: 200px;
+         overflow-x: auto;
+         white-space: nowrap;
     }
 }
 

src/views/codeRule/PreviewResult.vue

@@ -30,7 +30,7 @@
         <div class="tech-content" v-for="item in jsList" :key="item.id" >
           <div class="tech-item">
             <div class="tech-label">筛选结果</div>
-            <div class="tech-val">{{ item.symbolName }}</div>
+            <div class="tech-val">{{ item.symbol+item.name }}</div>
           </div>
 
           <div class="tech-item-list"  v-for="item1 in item.group" :key="item1.id">