perf(table): 新增 v-model:selectedKeys 选中项

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

@@ -107,8 +107,6 @@ export default {
 
 :::
 
-<lay-button></lay-button>
-
 ::: field page attributes
 
 :::

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

@@ -127,7 +127,7 @@ export default {
 
 <template>
   {{selectedKeys}}
-  <lay-table :columns="columns" id="id" :dataSource="dataSource" default-toolbar="true" :selectedKeys="selectedKeys" @changeSelectedKeys="changeSelectedKeys" checkbox="true">
+  <lay-table :columns="columns" id="id" :dataSource="dataSource" default-toolbar="true" v-model:selectedKeys="selectedKeys" @changeSelectedKeys="changeSelectedKeys" checkbox="true">
     <template v-slot:toolbar>
       <lay-button>新增</lay-button>
       <lay-button>删除</lay-button>
@@ -149,10 +149,6 @@ export default {
 
     const selectedKeys = ref(['1'])
 
-    const changeSelectedKeys = function(val) {
-      selectedKeys.value = val
-    }
-
     const columns = [
       {
         title:"账户",
@@ -184,8 +180,7 @@ export default {
     return {
       columns,
       dataSource,
-      selectedKeys,
-      changeSelectedKeys
+      selectedKeys
     }
   }
 }
@@ -199,9 +194,9 @@ export default {
 
 |                 |            |     |
 | --------------- | ---------- | --- |
-| columns         | 列配置     | --  |
-| dataSource      | 数据源     | --  |
-| checkbox        | 开启复现框 | --  |
+| columns         | 列配置      | --  |
+| dataSource      | 数据源      | --  |
+| checkbox        | 开启复现框  | --  |
 | id              | 主键       | --  |
-| selectKeys      | 选中项     | --  |
+| selectedKeys ( v-model )    | 选中项     | --  |
 | default-toolbar | 开启工具栏 | --  |

src/module/checkbox/index.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup name="LayCheckbox" lang="ts">
-import { defineProps, ref } from 'vue'
+import { defineProps } from 'vue'
 
 const props =
   defineProps<{
@@ -32,7 +32,7 @@ const emit = defineEmits(['update:checked', 'change'])
 const handleClick = function () {
   if (!props.disabled) {
       emit('update:checked', !props.checked)
-      emit('change', !props.checked)
+      emit('change', { checked: !props.checked, value: props.label })
   }
 }
 </script>

src/module/table/component/checkbox.vue

@@ -0,0 +1,49 @@
+<template>
+  <span @click="handleClick">
+    <input type="checkbox" :name="name" :value="label" />
+    <div
+      class="layui-unselect"
+      :class="[
+        {
+          'layui-checkbox-disbaled layui-disabled': disabled,
+        },
+        'layui-form-checkbox',
+        props.modelValue.includes(props.label) ? 'layui-form-checked' : '',
+      ]"
+      :lay-skin="skin"
+    >
+      <span><slot /></span>
+      <i v-if="skin == 'primary'" class="layui-icon layui-icon-ok" />
+      <i v-if="!skin" class="layui-icon layui-icon-ok" />
+    </div>
+  </span>
+</template>
+
+<script setup name="LayCheckbox" lang="ts">
+import { defineProps, ref } from 'vue'
+
+const props =
+  defineProps<{
+    modelValue: string[]
+    label: string
+    disabled?: boolean
+    name?: string
+    skin?: string
+  }>()
+
+const hasValue = ref(false)
+
+const emit = defineEmits(['update:modelValue'])
+
+const handleClick = function () {
+  if (!props.disabled) {
+    if (!props.modelValue.includes(props.label)) {
+      props.modelValue.push(props.label)
+    } else {
+      let index = props.modelValue.indexOf(props.label)
+      props.modelValue.splice(index, 1)
+    }
+    emit('update:modelValue', props.modelValue)
+  }
+}
+</script>

src/module/table/index.vue

@@ -30,9 +30,10 @@
                 <th v-if="checkbox" class="layui-table-col-special">
                   <div class="layui-table-cell laytable-cell-checkbox">
                     <lay-checkbox
-                      v-model="allSelectedKeys"
+                      v-model:checked="allChecked"
                       skin="primary"
                       label="all"
+                      @change="changeAll"
                     />
                   </div>
                 </th>
@@ -55,14 +56,14 @@
                 <tr>
                   <td v-if="checkbox" class="layui-table-col-special">
                     <div class="layui-table-cell laytable-cell-checkbox">
-                      <lay-checkbox
-                        v-model="tableSelectedKeys"
+                      <table-item-checkbox
                         skin="primary"
                         :label="data[id]"
-                      />
+                        v-model="tableSelectedKeys"
+                      >
+                      </table-item-checkbox>
                     </div>
                   </td>
-
                   <template v-for="column in columns" :key="column">
                     <template v-if="column.customSlot">
                       <td>
@@ -112,7 +113,9 @@
     </div>
   </div>
 </template>
-<script setup name="LayTable" lang="ts">
+<script setup name="LayTable"></script>
+<script setup lang="ts">
+import tableItemCheckbox from './component/checkbox.vue'
 import {
   defineProps,
   ref,
@@ -120,7 +123,6 @@ import {
   watch,
   withDefaults,
   defineEmits,
-  computed,
 } from 'vue'
 import { Recordable } from '/@src/module/type'
 
@@ -146,30 +148,40 @@ const props = withDefaults(
   }
 )
 
-const allSelectedKeys = ref([])
-const tableSelectedKeys = ref(props.selectedKeys)
-
-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', 'update:selectedKeys'])
 
 const slot = useSlots()
 const slots = slot.default && slot.default()
 
+const allChecked = ref(false)
+const tableSelectedKeys = ref([...props.selectedKeys])
+
+const changeAll = function ({ checked, value }: any) {
+  const ids = props.dataSource.map((item: any) => {
+    return item[props.id]
+  })
+  tableSelectedKeys.value.splice(0, ids.length)
+  if (checked) {
+    ids.forEach((id) => {
+      tableSelectedKeys.value.push(id)
+    })
+  }
+  emit('update:selectedKeys',tableSelectedKeys.value)
+}
+
+watch(
+  tableSelectedKeys,
+  function () {
+    if (tableSelectedKeys.value.length === props.dataSource.length) {
+      allChecked.value = true
+    } else {
+      allChecked.value = false
+    }
+    emit('update:selectedKeys',tableSelectedKeys.value)
+  },
+  { deep: true }
+)
+
 const change = function (page: any) {
   emit('change', page)
 }