修改个人和中介筛选的学校显示问题

src/components/selectTabBox/selectTabBox.vue

@@ -349,23 +349,48 @@ let shcoolData = shallowReactive([])
 let setSchoolData = () => {
     let arr = routePath.value === '/' ? store.state.seachTypeData[0] && store.state.seachTypeData[0].where : store.state.schoolList
     if (arr[0] && arr[0].id) arr.unshift({ name: '不限', id: '' })
+
     let num = 0
+    let accumulationWidth = 0    
     for (let i = 0; i < arr.length; i++) {
-        if (!shcoolData[num]) {
-            shcoolData[num] = []
-        }
-        if (shcoolData[num].length < 8) shcoolData[num].push(arr[i])
-        if (arr[i].id === schoolSelectObj.id) {
-            schoolSelectObj['page'] = num
-            schoolPages.value = num
-        }
-        if (shcoolData[num].length === 8) {
+        // if (!shcoolData[num]) {
+        //     shcoolData[num] = []
+        // }
+        // if (shcoolData[num].length < 8) shcoolData[num].push(arr[i])
+        // if (arr[i].id === schoolSelectObj.id) {
+        //     schoolSelectObj['page'] = num
+        //     schoolPages.value = num
+        // }
+        // if (shcoolData[num].length === 8) {
+        //     num++
+        // }
+
+        let width = accumulationWidth + getStrWidth(arr[i].name) + 20
+        if (width > 380) {  // 下一个二维数组
             num++
-        }
+            accumulationWidth = getStrWidth(arr[i].name) + 20
+        } else accumulationWidth = width
+        
+        if (!shcoolData[num]) shcoolData[num] = []
+        shcoolData[num].push(arr[i])
     }
+    // console.log(shcoolData);
     // console.log(schoolSelectObj)
 }
 
+// 计算字符串在屏幕的显示宽度
+let getStrWidth = (str) => {
+    let width = 0;
+    let fontSize = 14;
+    let font = fontSize + 'px Arial';
+    let canvas = document.createElement('canvas');
+    let context = canvas.getContext('2d');
+    context.font = font;
+    width = context.measureText(str).width;
+    return width;
+}
+
+
 //选择学校区域属性
 let setSchoolObj = (obj) => {
     if(obj.id===schoolSelectObj.id)return
@@ -944,6 +969,10 @@ img {
                 }
             }
 
+            .middle-btn {
+                background-color: #000000;
+            }
+
             .line {
                 height: 100%;
                 width: 1px;