perf: 格式化表格组件代码

src/packages/components/Tables/Tables/TablesBasic/config.ts

@@ -24,7 +24,7 @@ export const option = {
     borderColor: 'black',
     borderStyle: 'solid'
   },
-  inputShow:"none"
+  inputShow: 'none'
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

src/packages/components/Tables/Tables/TablesBasic/config.vue

@@ -2,10 +2,15 @@
   <collapse-item name="表格设置" :expanded="true">
     <setting-item-box :alone="true" name="对齐方式">
       <setting-item :alone="true">
-        <n-select v-model:value="optionData.align" size="small" 
+        <n-select
+          v-model:value="optionData.align"
+          size="small"
           :options="[
-          {label:'靠左',value:'left'},{label:'居中',value:'center'},{label:'靠右',value:'right'}
-        ]" />
+            { label: '靠左', value: 'left' },
+            { label: '居中', value: 'center' },
+            { label: '靠右', value: 'right' }
+          ]"
+        />
       </setting-item>
     </setting-item-box>
     <setting-item-box :alone="false" name="分页设置">
@@ -13,8 +18,7 @@
         <n-input-number v-model:value="optionData.pagination.page" size="small" placeholder="字体大小"></n-input-number>
       </setting-item>
       <setting-item name="分页" :alone="true">
-        <n-select v-model:value="optionData.pagination.pageSize" size="small" 
-        :options="page" />
+        <n-select v-model:value="optionData.pagination.pageSize" size="small" :options="page" />
       </setting-item>
     </setting-item-box>
     <setting-item-box :alone="false" name="表格数据">
@@ -26,55 +30,57 @@
     </setting-item-box>
     <setting-item-box :alone="false" name="表格样式">
       <SettingItem name="显示边框" :alone="true">
-        <n-select v-model:value="(optionData as any).style.border" size="small"
-                  :options="borderFlag" />
+        <n-select v-model:value="(optionData as any).style.border" size="small" :options="borderFlag" />
       </SettingItem>
       <SettingItem name="底部边框" :alone="true">
-        <n-select v-model:value="(optionData as any).style.bottomBordered" size="small"
-                  :options="bottom_borderedFlag" />
+        <n-select
+          v-model:value="(optionData as any).style.bottomBordered"
+          size="small"
+          :options="bottom_borderedFlag"
+        />
       </SettingItem>
       <SettingItem name="列分割线" :alone="true">
-        <n-select v-model:value="(optionData as any).style.singleLine" size="small"
-                  :options="columnFlag" />
+        <n-select v-model:value="(optionData as any).style.singleLine" size="small" :options="columnFlag" />
       </SettingItem>
       <SettingItem name="行分割线" :alone="true">
-        <n-select v-model:value="(optionData as any).style.singleColumn" size="small"
-                  :options="lineFlag" />
+        <n-select v-model:value="(optionData as any).style.singleColumn" size="small" :options="lineFlag" />
       </SettingItem>
       <SettingItem name="斑马条纹" :alone="true">
-        <n-select v-model:value="(optionData as any).style.striped" size="small"
-                  :options="stripedFlag" />
+        <n-select v-model:value="(optionData as any).style.striped" size="small" :options="stripedFlag" />
       </SettingItem>
       <setting-item name="字体大小" :alone="true">
-        <n-input-number v-model:value="optionData.style.fontSize" :min="12" size="small" placeholder="字体大小"></n-input-number>
+        <n-input-number
+          v-model:value="optionData.style.fontSize"
+          :min="12"
+          size="small"
+          placeholder="字体大小"
+        ></n-input-number>
       </setting-item>
       <setting-item name="边框宽度" :alone="true">
-        <n-input-number v-model:value="optionData.style.borderWidth" :min="0" size="small" placeholder="字体大小"></n-input-number>
+        <n-input-number
+          v-model:value="optionData.style.borderWidth"
+          :min="0"
+          size="small"
+          placeholder="字体大小"
+        ></n-input-number>
       </setting-item>
       <setting-item name="边框颜色" :alone="true">
-        <n-color-picker
-            size="small"
-            :modes="['rgb']"
-            v-model:value="optionData.style.borderColor"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['rgb']" v-model:value="optionData.style.borderColor"></n-color-picker>
       </setting-item>
       <setting-item name="边框样式" :alone="true">
-        <n-select v-model:value="optionData.style.borderStyle" size="small"
-                  :options="borderStyleFlag" />
+        <n-select v-model:value="optionData.style.borderStyle" size="small" :options="borderStyleFlag" />
       </setting-item>
       <SettingItem name="表格搜索" :alone="true">
-        <n-select v-model:value="optionData.inputShow" size="small"
-                  :options="inputSelect" />
+        <n-select v-model:value="optionData.inputShow" size="small" :options="inputSelect" />
       </SettingItem>
     </setting-item-box>
   </collapse-item>
 </template>
 
 <script setup lang="ts">
-import { PropType,watch,ref } from 'vue';
-import { option } from './config';
-
-import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';
+import { PropType, watch, ref } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
 const page = [
   { label: '2', value: 2 },
@@ -120,19 +126,19 @@ const props = defineProps({
   }
 })
 
-const header = ref();
+const header = ref()
 const median = ref<string[]>([])
 props.optionData.dataset.dimensions.forEach(item => {
-  median.value.push(item.title);
+  median.value.push(item.title)
 })
 
 //转string
 watch(
   () => props.optionData,
   () => {
-      median.value = [];
+    median.value = []
     props.optionData.dataset.dimensions.forEach(item => {
-        median.value.push(item.title);
+      median.value.push(item.title)
     })
     header.value = median.value.toString()
   },
@@ -152,5 +158,4 @@ watch([header], ([headerNew], [headerOld]) => {
     })
   }
 })
-
 </script>

src/packages/components/Tables/Tables/TablesBasic/index.vue

@@ -1,10 +1,17 @@
 <template>
   <div class="go-tables-basic">
-    <n-input v-model:value="inputData"
+    <n-input
+      v-model:value="inputData"
       placeholder="请输入信息"
-             :style="`display:${option.inputShow}`"
-             style="margin-bottom: 5px;float:right;width: 240px" />
-    <n-data-table :style="`
+      :style="`display: ${inputShow}`"
+      style="margin-bottom: 5px; float: right; width: 240px"
+    >
+      <template #prefix>
+        <n-icon :component="SearchIcon" />
+      </template>
+    </n-input>
+    <n-data-table
+      :style="`
       width: ${w}px;
       height: ${h}px;
       font-size: ${option.style.fontSize}px;
@@ -26,8 +33,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed,PropType, toRefs, watch, reactive,ref } from 'vue';
+import { computed, PropType, toRefs, watch, reactive, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
+import { icon } from '@/plugins'
 
 const props = defineProps({
   chartConfig: {
@@ -36,8 +44,10 @@ const props = defineProps({
   }
 })
 
+const { SearchIcon } = icon.ionicons5
+
 //查询字段
-const inputData = ref('');
+const inputData = ref('')
 //前台过滤
 const filterData = computed(() => {
   return option?.dataset?.source?.filter((item: any) => {
@@ -47,12 +57,8 @@ const filterData = computed(()=>{
   })
 })
 
-const {
-  align,
-  pagination
-} = toRefs(
-  props.chartConfig.option
-) 
+const { align, pagination, inputShow } = toRefs(props.chartConfig.option)
+
 pagination.value.onChange = (page: number) => {
   pagination.value.page = page
 }
@@ -61,31 +67,29 @@ const { w, h } = toRefs(props.chartConfig.attr)
 
 const option = reactive({
   dataset: props.chartConfig.option.dataset,
-  style : props.chartConfig.option.style,
-  inputShow : props.chartConfig.option.inputShow
+  style: props.chartConfig.option.style
 })
 
 watch(
   () => props.chartConfig.option.dataset,
   (newData: any) => {
-      option.dataset = newData;
+    option.dataset = newData
     option?.dataset?.dimensions?.forEach((header: any) => {
-            //对齐方式更新
-            header.align = align.value;
-      });
+      header.align = align.value
+    })
   },
   {
     immediate: true,
     deep: true
   }
 )
-
 </script>
 
 <style lang="scss" scoped>
 @include go('tables-basic') {
-  margin: 0 !important;
-  padding: 0 !important;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  align-items: flex-end;
 }
-
 </style>