feat(tree): 完成树形组件复选框功能

docs/docs/zh-CN/components/checkbox.md

@@ -1,5 +1,3 @@
-
-
 ::: demo
 
 <template>
@@ -25,8 +23,6 @@ export default {
 
 :::
 
-
-
 ::: demo
 
 <template>
@@ -138,11 +134,10 @@ export default {
 
 :::
 
-
+| Name                | Description   | Accepted Values      |
-| Name   | Description | Accepted Values  |
+| ------------------- | ------------- | -------------------- |
-| -------- | ---- | ----------------------- | 
+| name                | 原始属性 name | --                   |
-| name       | 原始属性 name | --  | 
+| skin                | 主题          | --                   |
-| skin       | 主题 | --  |
+| label               | 选中值        | --                   |
-| label      | 选中值 | --   | 
+| checked ( v-model ) | 是否选中      | `true` `false`       |
-| checked ( v-model )    | 是否选中 | `true` `false`   | 
+| change              | 切换事件      | isChecked : 当前状态 |
-| change   | 切换事件 | isChecked : 当前状态  | 

src/module/button/index.vue

@@ -7,7 +7,7 @@
       fluid ? 'layui-btn-fluid' : '',
       radius ? 'layui-btn-radius' : '',
       border ? 'layui-border-' + border : '',
-      disabled ? 'layui-btn-disabled': ''
+      disabled ? 'layui-btn-disabled' : '',
     ]"
   >
     <slot />

src/module/checkbox/index.vue

@@ -20,21 +20,20 @@ import { defineProps, useSlots } from 'vue'
 
 const slot = useSlots()
 
-const props =
+const props = defineProps<{
-  defineProps<{
+  name?: string
-    name?: string
+  skin?: string
-    skin?: string
+  label?: string
-    label?: string
+  checked?: boolean
-    checked?: boolean
+  disabled?: boolean
-    disabled?: boolean
+}>()
-  }>()
 
 const emit = defineEmits(['update:checked', 'change'])
 
 const handleClick = function () {
   if (!props.disabled) {
-      emit('update:checked', !props.checked)
+    emit('update:checked', !props.checked)
-      emit('change', { checked: !props.checked, value: props.label })
+    emit('change', { checked: !props.checked, value: props.label })
   }
 }
 </script>

src/module/table/component/checkbox.vue

@@ -21,14 +21,13 @@
 <script setup name="LayCheckbox" lang="ts">
 import { defineProps, ref } from 'vue'
 
-const props =
+const props = defineProps<{
-  defineProps<{
+  modelValue: string[]
-    modelValue: string[]
+  label: string
-    label: string
+  disabled?: boolean
-    disabled?: boolean
+  name?: string
-    name?: string
+  skin?: string
-    skin?: string
+}>()
-  }>()
 
 const hasValue = ref(false)
 
@@ -45,4 +44,4 @@ const handleClick = function () {
     emit('update:modelValue', props.modelValue)
   }
 }
-</script>
+</script>

src/module/table/index.vue

@@ -14,7 +14,12 @@
           <div class="layui-inline" title="筛选列" lay-event="LAYTABLE_COLS">
             <i class="layui-icon layui-icon-cols" />
           </div>
-          <div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT" @click="print()">
+          <div
+            class="layui-inline"
+            title="打印"
+            lay-event="LAYTABLE_PRINT"
+            @click="print()"
+          >
             <i class="layui-icon layui-icon-print" />
           </div>
         </div>
@@ -54,9 +59,9 @@
                   <td v-if="checkbox" class="layui-table-col-special">
                     <div class="layui-table-cell laytable-cell-checkbox">
                       <table-item-checkbox
+                        v-model="tableSelectedKeys"
                         skin="primary"
                         :label="data[id]"
-                        v-model="tableSelectedKeys"
                       >
                       </table-item-checkbox>
                     </div>

src/module/transfer/component/checkbox.vue

@@ -21,14 +21,13 @@
 <script setup name="LayCheckbox" lang="ts">
 import { defineProps, ref } from 'vue'
 
-const props =
+const props = defineProps<{
-  defineProps<{
+  modelValue: string[]
-    modelValue: string[]
+  label: string
-    label: string
+  disabled?: boolean
-    disabled?: boolean
+  name?: string
-    name?: string
+  skin?: string
-    skin?: string
+}>()
-  }>()
 
 const hasValue = ref(false)
 
@@ -45,4 +44,4 @@ const handleClick = function () {
     emit('update:modelValue', props.modelValue)
   }
 }
-</script>
+</script>

src/module/transfer/index.vue

@@ -25,10 +25,16 @@
         </ul>
       </div>
       <div class="layui-transfer-active">
-        <lay-button @click="add" type="primary" :disabled="leftSelectedKeys.length==0"
+        <lay-button
+          type="primary"
+          :disabled="leftSelectedKeys.length == 0"
+          @click="add"
           ><i class="layui-icon layui-icon-next"
         /></lay-button>
-        <lay-button @click="remove" type="primary" :disabled="rightSelectedKeys.length==0"
+        <lay-button
+          type="primary"
+          :disabled="rightSelectedKeys.length == 0"
+          @click="remove"
           ><i class="layui-icon layui-icon-prev"
         /></lay-button>
       </div>
@@ -74,8 +80,8 @@ const props = withDefaults(
   }>(),
   {
     id: 'id',
-    title: function() {
+    title: function () {
-      return ['主列表','副列表']
+      return ['主列表', '副列表']
     },
     dataSource: function () {
       return []
@@ -106,13 +112,17 @@ const allLeftChange = function ({ checked }: any) {
   }
 }
 
-watch(leftSelectedKeys, function(){
+watch(
-  if(leftDataSource.value.length === leftSelectedKeys.value.length ) {
+  leftSelectedKeys,
-    allLeftChecked.value = true
+  function () {
-  } else {
+    if (leftDataSource.value.length === leftSelectedKeys.value.length) {
-    allLeftChecked.value = false
+      allLeftChecked.value = true
-  }
+    } else {
-},{deep:true})
+      allLeftChecked.value = false
+    }
+  },
+  { deep: true }
+)
 
 const allRightChange = function ({ checked }: any) {
   if (checked) {
@@ -125,25 +135,29 @@ const allRightChange = function ({ checked }: any) {
   }
 }
 
-watch(rightSelectedKeys, function(){
+watch(
-  if(rightDataSource.value.length === rightSelectedKeys.value.length ) {
+  rightSelectedKeys,
-    allRightChecked.value = true
+  function () {
-  } else {
+    if (rightDataSource.value.length === rightSelectedKeys.value.length) {
-    allRightChecked.value = false
+      allRightChecked.value = true
-  }
+    } else {
-},{deep:true})
+      allRightChecked.value = false
+    }
+  },
+  { deep: true }
+)
 
-const add = function() {
+const add = function () {
-    // 删除 leftDataSource 选中的元素
+  // 删除 leftDataSource 选中的元素
-    rightDataSource.value = leftDataSource.value.filter(
+  rightDataSource.value = leftDataSource.value.filter(
-      item => leftSelectedKeys.value.indexOf(item.id) != -1
+    (item) => leftSelectedKeys.value.indexOf(item.id) != -1
-    )
+  )
 }
 
-const remove = function() {
+const remove = function () {
-    // 删除 rightDataSource 选中的元素
+  // 删除 rightDataSource 选中的元素
-    leftDataSource.value = rightDataSource.value.filter(
+  leftDataSource.value = rightDataSource.value.filter(
-      item => rightSelectedKeys.value.indexOf(item.id) != -1
+    (item) => rightSelectedKeys.value.indexOf(item.id) != -1
-    )
+  )
 }
 </script>