✨ feat: 广告管理<推广商品SP>: 顶部搜索popover中的Table样式完成

.prettierrc.js

@@ -1,42 +1,42 @@
 module.exports = {
-	singleAttributePerLine: false,
-	htmlWhitespaceSensitivity: 'ignore',
-	// 一行最多多少个字符
-	printWidth: 160,
-	// 指定每个缩进级别的空格数
-	tabWidth: 2,
-	// 使用制表符而不是空格缩进行
-	useTabs: false,
-	// 在语句末尾打印分号
-	semi: false,
-	// 使用单引号而不是双引号
-	singleQuote: true,
-	// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
-	quoteProps: 'as-needed',
-	// 在JSX中使用单引号而不是双引号
-	jsxSingleQuote: false,
-	// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
-	trailingComma: 'es5',
-	// 在对象文字中的括号之间打印空格
-	bracketSpacing: true,
-	// jsx 标签的反尖括号需要换行
-	jsxBracketSameLine: false,
-	bracketSameLine: true,
-	// 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
-	arrowParens: 'always',
-	// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
-	rangeStart: 0,
-	rangeEnd: Infinity,
-	// 指定要使用的解析器，不需要写文件开头的 @prettier
-	requirePragma: false,
-	// 不需要自动在文件开头插入 @prettier
-	insertPragma: false,
-	// 使用默认的折行标准 always\never\preserve
-	proseWrap: 'preserve',
-	// 指定HTML文件的全局空格敏感度 css\strict\ignore
-	htmlWhitespaceSensitivity: 'css',
-	// Vue文件脚本和样式标签缩进
-	vueIndentScriptAndStyle: false,
-	// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
-	endOfLine: 'lf',
-};
+  singleAttributePerLine: false,
+  htmlWhitespaceSensitivity: 'ignore',
+  // 一行最多多少个字符
+  printWidth: 150,
+  // 指定每个缩进级别的空格数
+  tabWidth: 2,
+  // 使用制表符而不是空格缩进行
+  useTabs: false,
+  // 在语句末尾打印分号
+  semi: false,
+  // 使用单引号而不是双引号
+  singleQuote: true,
+  // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
+  quoteProps: 'as-needed',
+  // 在JSX中使用单引号而不是双引号
+  jsxSingleQuote: false,
+  // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
+  trailingComma: 'es5',
+  // 在对象文字中的括号之间打印空格
+  bracketSpacing: true,
+  // jsx 标签的反尖括号需要换行
+  jsxBracketSameLine: false,
+  bracketSameLine: true,
+  // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
+  arrowParens: 'always',
+  // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
+  rangeStart: 0,
+  rangeEnd: Infinity,
+  // 指定要使用的解析器，不需要写文件开头的 @prettier
+  requirePragma: false,
+  // 不需要自动在文件开头插入 @prettier
+  insertPragma: false,
+  // 使用默认的折行标准 always\never\preserve
+  proseWrap: 'preserve',
+  // 指定HTML文件的全局空格敏感度 css\strict\ignore
+  htmlWhitespaceSensitivity: 'css',
+  // Vue文件脚本和样式标签缩进
+  vueIndentScriptAndStyle: false,
+  // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
+  endOfLine: 'lf',
+}

src/views/adManage/sp/TopFilter/PopoverFilter/InfinityList/index.vue

@@ -2,14 +2,10 @@
 import { reactive } from 'vue'
 
 const gridOptions = <any>reactive({
-  // border: true,
   height: 500,
   align: null,
-  // columnConfig: {
-  //   resizable: true,
-  // },
   columns: [
-    { type: 'seq', width: 50 },
+    { type: 'checkbox', width: 60 },
     { field: 'name', title: 'name' },
   ],
   data: [
@@ -19,31 +15,36 @@ const gridOptions = <any>reactive({
 })
 
 const gridOptionsRight = <any>reactive({
-  // border: true,
   height: 500,
   align: null,
-  // columnConfig: {
-  //   resizable: true,
-  // },
   columns: [
-    { type: 'seq', width: 50 },
-    { field: 'name', title: 'name' },
+    { type: 'checkbox', width: 60 },
+    { field: 'name', title: 'name', width: '300' },
+    { field: 'role', title: 'role', width: '300' },
+    { field: 'sex', title: 'sex', width: '300' },
+    { field: 'age', title: 'age', width: '300' },
+    { field: 'address', title: 'address', width: '300' },
   ],
   data: [
     { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
     { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
+    { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
   ],
 })
 </script>
 
 <template>
   <div class="flex">
-    <vxe-grid v-bind="gridOptions" class="ml-2 mb-2 mt-0 border border-r-0 rounded-bl-md rounded-tl-md overflow-hidden" style="flex: 0 1 260px"> </vxe-grid>
-    <vxe-grid v-bind="gridOptionsRight" class="mr-2 mb-2 mt-0 border rounded-br-md rounded-tr-md overflow-hidden" style="flex: 2 1 0"> </vxe-grid>
+    <vxe-grid
+      v-bind="gridOptions"
+      class="ml-2 mb-2 mt-0 border border-r-0 rounded-bl-md rounded-tl-md overflow-hidden"
+      style="flex: 0 1 260px"></vxe-grid>
+    <vxe-grid v-bind="gridOptionsRight" class="mr-2 mb-2 mt-0 border rounded-br-md rounded-tr-md overflow-hidden w-0" style="flex: 2 1 0"> </vxe-grid>
   </div>
 </template>
 
 <style scoped>
+/* 移除默认边框 */
 :deep(.vxe-table--render-default .vxe-table--border-line) {
   border: none;
 }

src/views/adManage/sp/TopFilter/index.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import {onMounted, ref} from 'vue'
 import PopoverFilter from './PopoverFilter/index.vue'
-import { getProductSelect } from './api'
+import {getProductSelect} from './api'
+import {CloseBold} from '@element-plus/icons-vue'
 
 const isVisible = ref(false)
 
@@ -31,14 +32,16 @@ onMounted(() => {
         <el-input v-model="productFilterInput" @click="isVisible = true" style="width: 350px" placeholder="请选择推广商品">
           <template #prepend>
             <el-select v-model="productFilterSelect" placeholder="Select" style="width: 100px">
-              <el-option v-for="item in productFilterOptions" :key="item.value" :label="item.label" :value="item.value" />
+              <el-option v-for="item in productFilterOptions" :key="item.value" :label="item.label" :value="item.value"/>
             </el-select>
           </template>
         </el-input>
       </template>
       <div class="flex justify-between">
         <div class="pb-3 font-bold text-slate-950 text-base">切换商品</div>
-        <el-icon class="cursor-pointer" @click="isVisible = false"><CloseBold /></el-icon>
+        <el-icon class="cursor-pointer" @click="isVisible = false">
+          <CloseBold/>
+        </el-icon>
       </div>
       <PopoverFilter></PopoverFilter>
     </el-popover>