rest(checkbox): 重构 checkbox 逻辑

src/module/checkbox/index.vue

@@ -8,7 +8,7 @@
           'layui-checkbox-disbaled layui-disabled': disabled,
         },
         'layui-form-checkbox',
-        hasValue ? 'layui-form-checked' : '',
+        props.modelValue.includes(props.label) ? 'layui-form-checked' : '',
       ]"
       :lay-skin="skin"
     >
@@ -24,7 +24,7 @@ import { defineProps, ref, watch } from 'vue'
 
 const props =
   defineProps<{
-    modelValue: Array<unknown>
+    modelValue: string[]
     label: string
     disabled?: boolean
     name?: string
@@ -33,14 +33,6 @@ const props =
 
 const hasValue = ref(false)
 
-watch(props.modelValue, (val) => {
-  if (props.modelValue.includes(props.label)) {
-    hasValue.value = true
-  } else {
-    hasValue.value = false
-  }
-},{immediate: true})
-
 const emit = defineEmits(['update:modelValue'])
 
 const handleClick = function () {
@@ -51,14 +43,6 @@ const handleClick = function () {
       let index = props.modelValue.indexOf(props.label)
       props.modelValue.splice(index, 1)
     }
-    props.modelValue.includes(props.label)
-      ? (hasValue.value = true)
-      : (hasValue.value = false)
-    if (props.modelValue.includes(props.label)) {
-      hasValue.value = true
-    } else {
-      hasValue.value = false
-    }
     emit('update:modelValue', props.modelValue)
   }
 }

src/module/menuItem/index.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup name="LayMenuItem" lang="ts">
-import { defineProps, inject, provide, Ref, ref, useSlots } from 'vue'
+import { defineProps, inject, Ref, ref, useSlots } from 'vue'
 const slots = useSlots()
 
 const props =

src/module/table/index.vue

@@ -29,7 +29,11 @@
               <tr>
                 <th class="layui-table-col-special" v-if="checkbox">
                   <div class="layui-table-cell laytable-cell-checkbox">
-                    <lay-checkbox skin="primary" v-model="tableSelectedKeys" label="all"></lay-checkbox>
+                    <lay-checkbox
+                      skin="primary"
+                      v-model="allSelectedKeys"
+                      label="all"
+                    ></lay-checkbox>
                   </div>
                 </th>
                 <th v-for="column in columns" :key="column">
@@ -51,7 +55,11 @@
                 <tr>
                   <td class="layui-table-col-special" v-if="checkbox">
                     <div class="layui-table-cell laytable-cell-checkbox">
-                      <lay-checkbox skin="primary" v-model="tableSelectedKeys" :label="data[id]"></lay-checkbox>
+                      <lay-checkbox
+                        skin="primary"
+                        v-model="tableSelectedKeys"
+                        :label="data[id]"
+                      ></lay-checkbox>
                     </div>
                   </td>
 
@@ -105,32 +113,56 @@
   </div>
 </template>
 <script setup name="LayTable" lang="ts">
-import { defineProps, ref, useSlots, watch, withDefaults, defineEmits, computed } from 'vue'
+import {
+  defineProps,
+  ref,
+  useSlots,
+  watch,
+  withDefaults,
+  defineEmits,
+  computed,
+} from 'vue'
 
 const props = withDefaults(
   defineProps<{
-    id?: string,
+    id?: string
     skin?: string
     page?: Object
     checkbox?: Boolean
     columns?: Object[]
-    dataSource?: Object[]
+    dataSource: Object[]
     defaultToolbar?: Boolean
     selectedKeys: Array<String>
   }>(),
   {
-    id: "id",
-    selectedKeys: function() { return [] }
+    id: 'id',
+    dataSource: function () {
+      return []
+    },
+    selectedKeys: function () {
+      return []
+    },
   }
 )
 
-const tableSelectedKeys = ref([...props.selectedKeys])
+const allSelectedKeys = ref([])
+const tableSelectedKeys = ref(props.selectedKeys)
 
-watch(tableSelectedKeys, function(val){
-  emit('changeSelectedKeys',val)
-},{deep: true})
+watch(
+  allSelectedKeys,
+  function (val: String[]) {
+    const ids = props.dataSource.map((item: any) => {
+      return item[props.id]
+    })
+    tableSelectedKeys.value.splice(0, ids.length)
+    if (val.includes('all')) {
+      ids.forEach(id => { tableSelectedKeys.value.push(id) })
+    } 
+  },
+  { deep: true }
+)
 
-const emit = defineEmits(['change','changeSelectedKeys'])
+const emit = defineEmits(['change', 'changeSelectedKeys'])
 
 const slot = useSlots()
 const slots = slot.default && slot.default()