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

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

@@ -1,5 +1,3 @@
-
-
 ::: demo
 
 <template>
@@ -25,8 +23,6 @@ export default {
 
 :::
 
-
-
 ::: demo
 
 <template>
@@ -138,9 +134,8 @@ export default {
 
 :::
 
-
 | Name                | Description   | Accepted Values      |
-| -------- | ---- | ----------------------- | 
+| ------------------- | ------------- | -------------------- |
 | name                | 原始属性 name | --                   |
 | skin                | 主题          | --                   |
 | label               | 选中值        | --                   |

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,8 +20,7 @@ import { defineProps, useSlots } from 'vue'
 
 const slot = useSlots()
 
-const props =
-  defineProps<{
+const props = defineProps<{
   name?: string
   skin?: string
   label?: string

src/module/table/component/checkbox.vue

@@ -21,8 +21,7 @@
 <script setup name="LayCheckbox" lang="ts">
 import { defineProps, ref } from 'vue'
 
-const props =
-  defineProps<{
+const props = defineProps<{
   modelValue: string[]
   label: string
   disabled?: boolean

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,8 +21,7 @@
 <script setup name="LayCheckbox" lang="ts">
 import { defineProps, ref } from 'vue'
 
-const props =
-  defineProps<{
+const props = defineProps<{
   modelValue: string[]
   label: string
   disabled?: boolean

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>
@@ -106,13 +112,17 @@ const allLeftChange = function ({ checked }: any) {
   }
 }
 
-watch(leftSelectedKeys, function(){
+watch(
+  leftSelectedKeys,
+  function () {
     if (leftDataSource.value.length === leftSelectedKeys.value.length) {
       allLeftChecked.value = true
     } else {
       allLeftChecked.value = false
     }
-},{deep:true})
+  },
+  { deep: true }
+)
 
 const allRightChange = function ({ checked }: any) {
   if (checked) {
@@ -125,25 +135,29 @@ const allRightChange = function ({ checked }: any) {
   }
 }
 
-watch(rightSelectedKeys, function(){
+watch(
+  rightSelectedKeys,
+  function () {
     if (rightDataSource.value.length === rightSelectedKeys.value.length) {
       allRightChecked.value = true
     } else {
       allRightChecked.value = false
     }
-},{deep:true})
+  },
+  { deep: true }
+)
 
 const add = function () {
   // 删除 leftDataSource 选中的元素
   rightDataSource.value = leftDataSource.value.filter(
-      item => leftSelectedKeys.value.indexOf(item.id) != -1
+    (item) => leftSelectedKeys.value.indexOf(item.id) != -1
   )
 }
 
 const remove = function () {
   // 删除 rightDataSource 选中的元素
   leftDataSource.value = rightDataSource.value.filter(
-      item => rightSelectedKeys.value.indexOf(item.id) != -1
+    (item) => rightSelectedKeys.value.indexOf(item.id) != -1
   )
 }
 </script>