From 32ba9242473449cb2508e581f3431f72025d89d3 Mon Sep 17 00:00:00 2001
From: Theluyuan <1162963624@qq.com>
Date: Fri, 21 Apr 2023 14:04:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=A7=84=E8=8C=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/table/TableRow.vue  |   4 +-
 src/component/table/index.vue     | 404 ++++++++++++++++++++----------
 src/component/table/soultable.vue | 168 +++++++------
 3 files changed, 367 insertions(+), 209 deletions(-)

diff --git a/src/component/table/TableRow.vue b/src/component/table/TableRow.vue
index 30b585c..711ba91 100644
--- a/src/component/table/TableRow.vue
+++ b/src/component/table/TableRow.vue
@@ -116,8 +116,8 @@ props.columns.map((value: any) => {
 });
 
 const rowClick = function (data: any, evt: MouseEvent) {
-  let click = new Event("click")
-  window.dispatchEvent(click)
+  let click = new Event("click");
+  window.dispatchEvent(click);
   emit("row", data, evt);
 };
 
diff --git a/src/component/table/index.vue b/src/component/table/index.vue
index 640bf73..5370378 100644
--- a/src/component/table/index.vue
+++ b/src/component/table/index.vue
@@ -71,11 +71,11 @@ const props = withDefaults(defineProps<TableProps>(), {
   rowStyle: "",
   cellStyle: "",
   defaultExpandAll: false,
-  spanMethod: () => { },
+  spanMethod: () => {},
   expandKeys: () => [],
   loading: false,
-  getCheckboxProps: () => { },
-  getRadioProps: () => { },
+  getCheckboxProps: () => {},
+  getRadioProps: () => {},
 });
 
 const emit = defineEmits([
@@ -86,15 +86,15 @@ const emit = defineEmits([
   "row-contextmenu",
   "row-double",
   "row",
-  "update:page"
+  "update:page",
 ]);
 
 const slot = useSlots();
 const slots = slot.default && slot.default();
 const tableRef = ref();
 
-const datalist = ref([...props.dataSource])
-console.log(datalist.value,97)
+const datalist = ref([...props.dataSource]);
+console.log(datalist.value, 97);
 const s = "";
 const allChecked = ref(false);
 const hasChecked = ref(false);
@@ -323,31 +323,34 @@ watch(
   },
   { deep: true, immediate: true }
 );
-watch(tableDataSource,()=>{
-  if(!props.page){
-      datalist.value = tableDataSource.value
-  }else{
+watch(tableDataSource, () => {
+  if (!props.page) {
+    datalist.value = tableDataSource.value;
+  } else {
     // props.page.count = tableDataSource.value.length
-    let tmp ={...props.page}
-    tmp.total = tableDataSource.value.length
-    emit("update:page",tmp)
+    let tmp = { ...props.page };
+    tmp.total = tableDataSource.value.length;
+    emit("update:page", tmp);
     // tableDataSource.value = endlist
     change({
       limit: props.page.limit,
-      current: pagecurrent || props.page.current
-    })
+      current: pagecurrent || props.page.current,
+    });
   }
-})
-watch(()=>props.page,()=>{
-  console.log(props.page,342)
-})
-let pagecurrent:number;
+});
+watch(
+  () => props.page,
+  () => {
+    console.log(props.page, 342);
+  }
+);
+let pagecurrent: number;
 const change = function (page: any) {
   // emit("change", page);
-  pagecurrent = page.current
+  pagecurrent = page.current;
   datalist.value = tableDataSource.value.slice(
-      page.limit * (page.current - 1),
-      page.limit * page.current
+    page.limit * (page.current - 1),
+    page.limit * page.current
   );
 };
 
@@ -738,67 +741,69 @@ onBeforeUnmount(() => {
 const soulstatus = ref(false);
 const soultop = ref(0);
 const soulleft = ref(0);
-const selcolumn = ref<any>({})
-const soulkey = ref("")
-const sxlist:any = ref({})
+const selcolumn = ref<any>({});
+const soulkey = ref("");
+const sxlist: any = ref({});
 function showsoul(event: MouseEvent, column: any, key: string) {
   console.log(event);
   soulleft.value = event.pageX;
   soultop.value = event.pageY;
   soulstatus.value = true;
   selcolumn.value = column;
-  soulkey.value = key
+  soulkey.value = key;
 }
 const heddin = () => {
-  soulkey.value = ""
-}
+  soulkey.value = "";
+};
 function asc(event: any) {
-  selcolumn.value.soulclass = "soul-icon-filter-asc"
-  sortTable(event, selcolumn.value.key, "asc", true)
+  selcolumn.value.soulclass = "soul-icon-filter-asc";
+  sortTable(event, selcolumn.value.key, "asc", true);
 }
 function desc(event: any) {
-  selcolumn.value.soulclass = "soul-icon-filter-desc"
-  sortTable(event, selcolumn.value.key, "desc", true)
+  selcolumn.value.soulclass = "soul-icon-filter-desc";
+  sortTable(event, selcolumn.value.key, "desc", true);
 }
 
-function sx(e:any){
-  sxlist.value[e.key] = e.list
-  
+function sx(e: any) {
+  sxlist.value[e.key] = e.list;
 }
-watch(sxlist,()=>{
-// tableDataSource
-let list:any = [...props.dataSource]
-  let endlist:any = []
-  for(let i in sxlist.value){
-    for(let j in list){
-      if(list[j] != "" && sxlist.value[i].length != 0){
-        if(!sxlist.value[i].includes(list[j][i])){
-          list[j] = ""
+watch(
+  sxlist,
+  () => {
+    // tableDataSource
+    let list: any = [...props.dataSource];
+    let endlist: any = [];
+    for (let i in sxlist.value) {
+      for (let j in list) {
+        if (list[j] != "" && sxlist.value[i].length != 0) {
+          if (!sxlist.value[i].includes(list[j][i])) {
+            list[j] = "";
+          }
         }
       }
     }
-  }
-  for(let i of list){
-    if(i != ""){
-      endlist.push(i)
+    for (let i of list) {
+      if (i != "") {
+        endlist.push(i);
+      }
     }
+    if (!props.page) {
+      datalist.value = endlist;
+    } else {
+      tableDataSource.value = endlist;
+      change({
+        limit: props.page.limit,
+        current: pagecurrent || props.page.current,
+      });
+    }
+    console.log("筛选", endlist);
+  },
+  {
+    deep: true,
   }
-  if(!props.page){
-      datalist.value = endlist
-  }else{
-    tableDataSource.value = endlist
-    change({
-      limit: props.page.limit,
-      current: pagecurrent || props.page.current
-    })
-  }
-  console.log("筛选",endlist)
-},{
-  deep: true
-})
-window.addEventListener("click", heddin)
+);
+window.addEventListener("click", heddin);
 // 将分页移入到组件内
-
 </script>
 
 <template>
@@ -811,27 +816,50 @@ window.addEventListener("click", heddin)
         </div>
         <div v-if="defaultToolbar" class="layui-table-tool-self">
           <!-- 筛选 -->
-          <lay-dropdown v-if="showToolbar('filter')" updateAtScroll :style="toolbarStyle('filter')">
+          <lay-dropdown
+            v-if="showToolbar('filter')"
+            updateAtScroll
+            :style="toolbarStyle('filter')"
+          >
             <div class="layui-inline" title="筛选" lay-event>
               <i class="layui-icon layui-icon-slider"></i>
             </div>
             <template #content>
               <div class="layui-table-tool-checkbox">
-                <lay-checkbox v-for="column in tableHeadColumns[0]" v-model="tableColumnKeys" skin="primary"
-                  :disabled="column.children" :key="column.key" :value="column.key">{{ column.title }}</lay-checkbox>
+                <lay-checkbox
+                  v-for="column in tableHeadColumns[0]"
+                  v-model="tableColumnKeys"
+                  skin="primary"
+                  :disabled="column.children"
+                  :key="column.key"
+                  :value="column.key"
+                  >{{ column.title }}</lay-checkbox
+                >
               </div>
             </template>
           </lay-dropdown>
 
           <!-- 导出 -->
-          <div v-if="showToolbar('export')" class="layui-inline" title="导出" lay-event :style="toolbarStyle('export')"
-            @click="exportData()">
+          <div
+            v-if="showToolbar('export')"
+            class="layui-inline"
+            title="导出"
+            lay-event
+            :style="toolbarStyle('export')"
+            @click="exportData()"
+          >
             <i class="layui-icon layui-icon-export"></i>
           </div>
 
           <!-- 打印 -->
-          <div v-if="showToolbar('print')" :style="toolbarStyle('print')" class="layui-inline" title="打印" lay-event
-            @click="print()">
+          <div
+            v-if="showToolbar('print')"
+            :style="toolbarStyle('print')"
+            class="layui-inline"
+            title="打印"
+            lay-event
+            @click="print()"
+          >
             <i class="layui-icon layui-icon-print"></i>
           </div>
         </div>
@@ -843,26 +871,47 @@ window.addEventListener("click", heddin)
 
       <div class="layui-table-box">
         <!-- 表头 -->
-        <div class="layui-table-header" :style="[{ 'padding-right': `${scrollWidthCell}px` }]">
+        <div
+          class="layui-table-header"
+          :style="[{ 'padding-right': `${scrollWidthCell}px` }]"
+        >
           <div class="layui-table-header-wrapper" ref="tableHeader">
-            <table class="layui-table" :lay-size="size" :lay-skin="skin" ref="tableHeaderTable">
+            <table
+              class="layui-table"
+              :lay-size="size"
+              :lay-skin="skin"
+              ref="tableHeaderTable"
+            >
               <colgroup>
                 <template v-for="column in tableBodyColumns" :key="column">
                   <template v-if="tableColumnKeys.includes(column.key)">
-                    <col :width="column.width" :style="{
-                      minWidth: column.minWidth ? column.minWidth : '50px',
-                    }" />
+                    <col
+                      :width="column.width"
+                      :style="{
+                        minWidth: column.minWidth ? column.minWidth : '50px',
+                      }"
+                    />
                   </template>
                 </template>
               </colgroup>
               <thead>
-                <template v-for="(
-                        tableHeadColumn, tableHeadColumnIndex
-                      ) in tableHeadColumns" :key="tableHeadColumnIndex">
+                <template
+                  v-for="(
+                    tableHeadColumn, tableHeadColumnIndex
+                  ) in tableHeadColumns"
+                  :key="tableHeadColumnIndex"
+                >
                   <tr>
-                    <template v-for="(column, columnIndex) in tableHeadColumn" :key="column">
-                      <th v-if="tableColumnKeys.includes(column.key)" :colspan="column.colspan" :rowspan="column.rowspan"
-                        class="layui-table-cell" :class="[
+                    <template
+                      v-for="(column, columnIndex) in tableHeadColumn"
+                      :key="column"
+                    >
+                      <th
+                        v-if="tableColumnKeys.includes(column.key)"
+                        :colspan="column.colspan"
+                        :rowspan="column.rowspan"
+                        class="layui-table-cell"
+                        :class="[
                           renderFixedClassName(column, columnIndex),
                           column.fixed
                             ? `layui-table-fixed-${column.fixed}`
@@ -876,7 +925,8 @@ window.addEventListener("click", heddin)
                           column.type == 'number'
                             ? 'layui-table-cell-number'
                             : '',
-                        ]" :style="[
+                        ]"
+                        :style="[
                           {
                             textAlign: column.align,
                           },
@@ -885,10 +935,16 @@ window.addEventListener("click", heddin)
                             columnIndex,
                             tableHeadColumn
                           ),
-                        ]">
+                        ]"
+                      >
                         <template v-if="column.type == 'checkbox'">
-                          <lay-checkbox v-model="hasChecked" :is-indeterminate="!allChecked" skin="primary" value="all"
-                            @change="changeAll" />
+                          <lay-checkbox
+                            v-model="hasChecked"
+                            :is-indeterminate="!allChecked"
+                            skin="primary"
+                            value="all"
+                            @change="changeAll"
+                          />
                         </template>
                         <template v-else>
                           <span>
@@ -900,16 +956,33 @@ window.addEventListener("click", heddin)
                             </template>
                           </span>
                           <!-- 插槽 -->
-                          <span v-if="column.sort" class="layui-table-sort layui-inline" lay-sort>
-                            <i @click.stop="sortTable($event, column.key, 'asc')" class="layui-edge layui-table-sort-asc"
-                              title="升序"></i>
-                            <i @click.stop="
-                              sortTable($event, column.key, 'desc')
-                            " class="layui-edge layui-table-sort-desc" title="降序"></i>
+                          <span
+                            v-if="column.sort"
+                            class="layui-table-sort layui-inline"
+                            lay-sort
+                          >
+                            <i
+                              @click.stop="sortTable($event, column.key, 'asc')"
+                              class="layui-edge layui-table-sort-asc"
+                              title="升序"
+                            ></i>
+                            <i
+                              @click.stop="
+                                sortTable($event, column.key, 'desc')
+                              "
+                              class="layui-edge layui-table-sort-desc"
+                              title="降序"
+                            ></i>
                           </span>
-                          <span v-if="column.soul" class="layui-table-sort layui-inline soul-icon">
-                            <i class="soul-icon soul-box" :class="column.soulclass || 'soul-icon-filter'"
-                              @click.stop="showsoul($event, column, column.key)">
+                          <span
+                            v-if="column.soul"
+                            class="layui-table-sort layui-inline soul-icon"
+                          >
+                            <i
+                              class="soul-icon soul-box"
+                              :class="column.soulclass || 'soul-icon-filter'"
+                              @click.stop="showsoul($event, column, column.key)"
+                            >
                               <!-- <div v-show="column.soulshow" @click.stop="" class="soulbox">
                                     11111
                                   </div> -->
@@ -925,29 +998,61 @@ window.addEventListener("click", heddin)
           </div>
         </div>
         <!-- 表身 -->
-        <div class="layui-table-body layui-table-main" :style="{ height: height, maxHeight: maxHeight }" ref="tableBody">
-          <table class="layui-table" v-if="datalist.length > 0 && loading == false"
-            :class="{ 'layui-table-even': props.even }" :lay-size="size" :lay-skin="skin">
+        <div
+          class="layui-table-body layui-table-main"
+          :style="{ height: height, maxHeight: maxHeight }"
+          ref="tableBody"
+        >
+          <table
+            class="layui-table"
+            v-if="datalist.length > 0 && loading == false"
+            :class="{ 'layui-table-even': props.even }"
+            :lay-size="size"
+            :lay-skin="skin"
+          >
             <colgroup>
-              <template v-for="(column, columnIndex) in tableBodyColumns" :key="columnIndex">
+              <template
+                v-for="(column, columnIndex) in tableBodyColumns"
+                :key="columnIndex"
+              >
                 <template v-if="tableColumnKeys.includes(column.key)">
-                  <col :width="column.width" :style="{
-                    minWidth: column.minWidth ? column.minWidth : '50px',
-                  }" />
+                  <col
+                    :width="column.width"
+                    :style="{
+                      minWidth: column.minWidth ? column.minWidth : '50px',
+                    }"
+                  />
                 </template>
               </template>
             </colgroup>
             <tbody>
               <!-- 渲染 -->
               <template v-for="(children, index) in datalist" :key="index">
-                <table-row :id="id" :index="index" :data="children" :columns="tableBodyColumns" :indent-size="indentSize"
-                  :currentIndentSize="currentIndentSize" :tableColumnKeys="tableColumnKeys"
-                  :expandSpace="childrenExpandSpace" :expandIndex="expandIndex" :cellStyle="cellStyle"
-                  :cellClassName="cellClassName" :rowStyle="rowStyle" :rowClassName="rowClassName"
-                  :spanMethod="spanMethod" :defaultExpandAll="defaultExpandAll" :getCheckboxProps="getCheckboxProps"
-                  :getRadioProps="getRadioProps" v-model:expandKeys="tableExpandKeys"
-                  v-model:selectedKeys="tableSelectedKeys" v-model:selectedKey="tableSelectedKey" @row="rowClick"
-                  @row-double="rowDoubleClick" @row-contextmenu="rowContextmenu">
+                <table-row
+                  :id="id"
+                  :index="index"
+                  :data="children"
+                  :columns="tableBodyColumns"
+                  :indent-size="indentSize"
+                  :currentIndentSize="currentIndentSize"
+                  :tableColumnKeys="tableColumnKeys"
+                  :expandSpace="childrenExpandSpace"
+                  :expandIndex="expandIndex"
+                  :cellStyle="cellStyle"
+                  :cellClassName="cellClassName"
+                  :rowStyle="rowStyle"
+                  :rowClassName="rowClassName"
+                  :spanMethod="spanMethod"
+                  :defaultExpandAll="defaultExpandAll"
+                  :getCheckboxProps="getCheckboxProps"
+                  :getRadioProps="getRadioProps"
+                  v-model:expandKeys="tableExpandKeys"
+                  v-model:selectedKeys="tableSelectedKeys"
+                  v-model:selectedKey="tableSelectedKey"
+                  @row="rowClick"
+                  @row-double="rowDoubleClick"
+                  @row-contextmenu="rowContextmenu"
+                >
                   <template v-for="name in slotsData" #[name]="{ data }">
                     <slot :name="name" :data="data"></slot>
                   </template>
@@ -957,21 +1062,28 @@ window.addEventListener("click", heddin)
                 </table-row>
               </template>
               <tr v-if="hasTotalRow" class="layui-table-total">
-                <template v-for="(column, columnIndex) in columns" :key="columnIndex">
+                <template
+                  v-for="(column, columnIndex) in columns"
+                  :key="columnIndex"
+                >
                   <template v-if="tableColumnKeys.includes(column.key)">
-                    <td :style="[
-                      {
-                        textAlign: column.align,
-                        whiteSpace: column.ellipsisTooltip
-                          ? 'nowrap'
-                          : 'normal',
-                      },
-                      renderFixedStyle(column, columnIndex),
-                    ]" :class="[
-  'layui-table-cell',
-  renderFixedClassName(column, columnIndex),
-  column.fixed ? `layui-table-fixed-${column.fixed}` : '',
-]" v-html="renderTotalRowCell(column)"></td>
+                    <td
+                      :style="[
+                        {
+                          textAlign: column.align,
+                          whiteSpace: column.ellipsisTooltip
+                            ? 'nowrap'
+                            : 'normal',
+                        },
+                        renderFixedStyle(column, columnIndex),
+                      ]"
+                      :class="[
+                        'layui-table-cell',
+                        renderFixedClassName(column, columnIndex),
+                        column.fixed ? `layui-table-fixed-${column.fixed}` : '',
+                      ]"
+                      v-html="renderTotalRowCell(column)"
+                    ></td>
                   </template>
                 </template>
               </tr>
@@ -983,7 +1095,9 @@ window.addEventListener("click", heddin)
           </template>
           <template v-if="loading == true">
             <div class="layui-table-loading">
-              <i class="layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
+              <i
+                class="layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"
+              ></i>
             </div>
           </template>
         </div>
@@ -992,22 +1106,40 @@ window.addEventListener("click", heddin)
         </div>
       </div>
       <div v-if="page && page.total > 0" class="layui-table-page">
-        <table-page :total="page.total" :pages="page.pages" :theme="page.theme" :limits="page.limits"
-          :showSkip="page.showSkip" :show-page="page.showPage" :showRefresh="page.showRefresh" :showLimit="page.showLimit"
-          :showCount="page.showCount" :count="page.count" v-model:current="page.current" v-model:limit="page.limit"
-          @change="change">
+        <table-page
+          :total="page.total"
+          :pages="page.pages"
+          :theme="page.theme"
+          :limits="page.limits"
+          :showSkip="page.showSkip"
+          :show-page="page.showPage"
+          :showRefresh="page.showRefresh"
+          :showLimit="page.showLimit"
+          :showCount="page.showCount"
+          :count="page.count"
+          v-model:current="page.current"
+          v-model:limit="page.limit"
+          @change="change"
+        >
         </table-page>
       </div>
     </div>
-    <div v-for="(
-                        tableHeadColumn, tableHeadColumnIndex
-                      ) in tableHeadColumns" :key="tableHeadColumnIndex">
+    <div
+      v-for="(tableHeadColumn, tableHeadColumnIndex) in tableHeadColumns"
+      :key="tableHeadColumnIndex"
+    >
       <div v-for="(column, columnIndex) in tableHeadColumn" :key="column">
-        <soultable :top="soultop" :left="soulleft" v-show="soulkey == column.key" @asc="asc" @desc="desc" :list="props.dataSource"
-          :soulkey="column.key" @sx="sx"></soultable>
+        <soultable
+          :top="soultop"
+          :left="soulleft"
+          v-show="soulkey == column.key"
+          @asc="asc"
+          @desc="desc"
+          :list="props.dataSource"
+          :soulkey="column.key"
+          @sx="sx"
+        ></soultable>
       </div>
     </div>
-
-
   </div>
 </template>
diff --git a/src/component/table/soultable.vue b/src/component/table/soultable.vue
index 4e94f2d..bb8889c 100644
--- a/src/component/table/soultable.vue
+++ b/src/component/table/soultable.vue
@@ -1,120 +1,146 @@
 <template>
-  <div class="soulbox" :style="`top: ${props.top}px;left:${props.left}px`" @click.stop="">
+  <div
+    class="soulbox"
+    :style="`top: ${props.top}px;left:${props.left}px`"
+    @click.stop=""
+  >
     <ul>
-      <li @click="asc" class="soul-sort" data-value="asc" style=""><i class="soul-icon soul-icon-asc"></i> 升序排列 </li>
-      <li @click="desc" class="soul-sort" data-value="desc" style="border-bottom: 1px solid rgb(230, 230, 230);"><i
-          class="soul-icon soul-icon-desc"></i> 降序排列 </li>
+      <li @click="asc" class="soul-sort" data-value="asc" style="">
+        <i class="soul-icon soul-icon-asc"></i> 升序排列
+      </li>
+      <li
+        @click="desc"
+        class="soul-sort"
+        data-value="desc"
+        style="border-bottom: 1px solid rgb(230, 230, 230)"
+      >
+        <i class="soul-icon soul-icon-desc"></i> 降序排列
+      </li>
       <!-- <li class="soul-column" style=""><i class="layui-icon layui-icon-table"></i> 表格列 <i
             class="layui-icon layui-icon-right" style="float: right"></i></li> -->
-      <li class="soul-dropList" style="" @mouseover="selshow = true"><i class="soul-icon soul-icon-drop-list"></i> 筛选数据 <i
-          class="layui-icon layui-icon-right" style="float: right"></i></li>
+      <li class="soul-dropList" style="" @mouseover="selshow = true">
+        <i class="soul-icon soul-icon-drop-list"></i> 筛选数据
+        <i class="layui-icon layui-icon-right" style="float: right"></i>
+      </li>
       <!-- <li class="soul-condition" style=""><i class="soul-icon soul-icon-query"></i> 筛选条件 <i
             class="layui-icon layui-icon-right" style="float: right"></i></li>
         <li class="soul-edit-condition" style=""><i class="layui-icon layui-icon-edit"></i> 编辑筛选条件 </li>
         <li class="soul-export" style=""><i class="soul-icon soul-icon-download"></i> 导出excel </li> -->
     </ul>
-    <div class="soulbox" style="left: 100%;top:65px" v-show="selshow">
-      <lay-input prefix-icon="layui-icon-search" v-model="seltext" size="sm" placeholder="关键字搜索">
+    <div class="soulbox" style="left: 100%; top: 65px" v-show="selshow">
+      <lay-input
+        prefix-icon="layui-icon-search"
+        v-model="seltext"
+        size="sm"
+        placeholder="关键字搜索"
+      >
       </lay-input>
-      <div class="check" style="min-width: 180px;">
-        <div class="multiOption" data-type="all" @click="select(1)"><i class="soul-icon"></i> 全选</div>
-        <div class="multiOption" data-type="none" @click="select(2)"><i class="soul-icon"></i> 清空</div>
-        <div class="multiOption" data-type="reverse" @click="select(3)"><i class="soul-icon"></i>反选</div>
+      <div class="check" style="min-width: 180px">
+        <div class="multiOption" data-type="all" @click="select(1)">
+          <i class="soul-icon"></i> 全选
+        </div>
+        <div class="multiOption" data-type="none" @click="select(2)">
+          <i class="soul-icon"></i> 清空
+        </div>
+        <div class="multiOption" data-type="reverse" @click="select(3)">
+          <i class="soul-icon"></i>反选
+        </div>
       </div>
       <ul>
         <LayCheckboxGroup v-model="sel">
-          <li v-for="i, j in list">
+          <li v-for="(i, j) in list">
             <LayCheckbox skin="primary" :value="i"></LayCheckbox>{{ i }}
           </li>
         </LayCheckboxGroup>
       </ul>
     </div>
-
   </div>
 </template>
 
 <script lang="ts" setup>
-import "./soultable.less"
+import "./soultable.less";
 import { ref, watch, withDefaults } from "vue";
-import layInput from "../input/index.vue"
+import layInput from "../input/index.vue";
 import LayCheckbox from "../checkbox/index.vue";
 import LayCheckboxGroup from "../checkboxGroup/index.vue";
 export interface SoulTableProps {
-  left: number,
-  top: number,
-  list: any,
-  soulkey: string,
+  left: number;
+  top: number;
+  list: any;
+  soulkey: string;
 }
 const props = withDefaults(defineProps<SoulTableProps>(), {
   top: 10,
   left: 10,
   list: [],
-  soulkey: ""
-})
-const emit = defineEmits(["asc", "desc","sx"])
+  soulkey: "",
+});
+const emit = defineEmits(["asc", "desc", "sx"]);
 function asc(event: any) {
-  emit("asc", event)
+  emit("asc", event);
 }
 function desc(event: any) {
-  emit("desc", event)
+  emit("desc", event);
 }
-const sel:any = ref([])
-const list: any = ref([])
-const alllist:any = ref([])
-watch(() => [props.list,props.soulkey], () => {
-  let set = new Set()
-  for (let i of props.list) {
-    set.add(i[props.soulkey])
-    console.log(i, i[props.soulkey])
-  }
-  alllist.value = Array.from(set)
-  list.value = alllist.value
-  console.log(list.value)
-},
-  { deep: true })
+const sel: any = ref([]);
+const list: any = ref([]);
+const alllist: any = ref([]);
+watch(
+  () => [props.list, props.soulkey],
+  () => {
+    let set = new Set();
+    for (let i of props.list) {
+      set.add(i[props.soulkey]);
+      console.log(i, i[props.soulkey]);
+    }
+    alllist.value = Array.from(set);
+    list.value = alllist.value;
+    console.log(list.value);
+  },
+  { deep: true }
+);
 // watch(alllist,()=>{
 //   list.value = []
 //   for(let i of list){
 
 //   }
 // })
-const seltext = ref("")
-watch(seltext,()=>{
-  let l = []
-  if(seltext.value){
-    for(let i of alllist.value){
-      if(i.indexOf(seltext.value) != -1){
-        l.push(i)
+const seltext = ref("");
+watch(seltext, () => {
+  let l = [];
+  if (seltext.value) {
+    for (let i of alllist.value) {
+      if (i.indexOf(seltext.value) != -1) {
+        l.push(i);
       }
     }
-  }else{
-    l = alllist.value
+  } else {
+    l = alllist.value;
   }
-  list.value = l
-})
-watch(sel,()=>{
-  emit("sx",{key:props.soulkey,list:sel.value})
-})
-function select(type: number){
-  if(type == 1){
-    sel.value = []
-    let t = []
-    for(let i of list.value){
-      t.push(i)
+  list.value = l;
+});
+watch(sel, () => {
+  emit("sx", { key: props.soulkey, list: sel.value });
+});
+function select(type: number) {
+  if (type == 1) {
+    sel.value = [];
+    let t = [];
+    for (let i of list.value) {
+      t.push(i);
     }
-    sel.value = t
-  }else if(type == 3){
-    let t = []
-    for(let i of list.value){
-      if(!sel.value.includes(i)){
-        t.push(i)
+    sel.value = t;
+  } else if (type == 3) {
+    let t = [];
+    for (let i of list.value) {
+      if (!sel.value.includes(i)) {
+        t.push(i);
       }
     }
-    sel.value = t
-  }else if(type == 2){
-    sel.value = []
+    sel.value = t;
+  } else if (type == 2) {
+    sel.value = [];
   }
 }
-const selshow = ref(false)
-
-</script>
\ No newline at end of file
+const selshow = ref(false);
+</script>