feat(table): 新增 id 与 selectedKeys, checkbox 属性, 待完善多选框逻辑

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

@@ -126,7 +126,8 @@ export default {
 ::: demo
 
 <template>
-  <lay-table :columns="columns" :dataSource="dataSource" default-toolbar="true">
+  {{selectedKeys}}
+  <lay-table :columns="columns" id="id" :dataSource="dataSource" default-toolbar="true" :selectedKeys="selectedKeys" checkbox="true">
     <template v-slot:toolbar>
       <lay-button>新增</lay-button>
       <lay-button>删除</lay-button>
@@ -146,6 +147,8 @@ import { ref } from 'vue'
 export default {
   setup() {
 
+    const selectedKeys = ref(['1'])
+
     const columns = [
       {
         title:"账户",
@@ -170,16 +173,26 @@ export default {
     ]
 
     const dataSource = [
-      {username:"root", password:"root", age:"18"},
-      {username:"woow", password:"woow", age:"20"}
+      {id:"1", username:"root", password:"root", age:"18"},
+      {id:"2", username:"woow", password:"woow", age:"20"}
     ]
 
     return {
       columns,
-      dataSource
+      dataSource,
+      selectedKeys,
     }
   }
 }
 </script>
 
 :::
+
+|  |  |  |
+|--|--|--|
+| columns | 列配置 | -- |
+| dataSource | 数据源 | -- |
+| checkbox | 开启复现框 | -- |
+| id | 主键 | -- |
+| selectKeys | 选中项 | -- |
+| default-toolbar | 开启工具栏 | -- |

src/module/table/index.vue

@@ -27,19 +27,9 @@
           <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
             <thead>
               <tr>
-                <th class="layui-table-col-special">
+                <th class="layui-table-col-special" v-if="checkbox">
                   <div class="layui-table-cell laytable-cell-checkbox">
-                    <input
-                      type="checkbox"
-                      name="layTableCheckbox"
-                      lay-skin="primary"
-                    />
-                    <div
-                      class="layui-unselect layui-form-checkbox"
-                      lay-skin="primary"
-                    >
-                      <i class="layui-icon layui-icon-ok"></i>
-                    </div>
+                    <lay-checkbox skin="primary" v-model="tableSelectedKeys" label="all"></lay-checkbox>
                   </div>
                 </th>
                 <th v-for="column in columns" :key="column">
@@ -59,19 +49,9 @@
             <tbody>
               <template v-for="data in dataSource" :key="data">
                 <tr>
-                  <td class="layui-table-col-special">
+                  <td class="layui-table-col-special" v-if="checkbox">
                     <div class="layui-table-cell laytable-cell-checkbox">
-                      <input
-                        type="checkbox"
-                        name="layTableCheckbox"
-                        lay-skin="primary"
-                      />
-                      <div
-                        class="layui-unselect layui-form-checkbox"
-                        lay-skin="primary"
-                      >
-                        <i class="layui-icon layui-icon-ok"></i>
-                      </div>
+                      <lay-checkbox skin="primary" v-model="tableSelectedKeys" :label="data[id]"></lay-checkbox>
                     </div>
                   </td>
 
@@ -125,16 +105,26 @@
   </div>
 </template>
 <script setup name="LayTable" lang="ts">
-import { defineProps, useSlots } from 'vue'
+import { defineProps, ref, useSlots, watch, withDefaults, defineEmits } from 'vue'
 
-const props =
+const props = withDefaults(
   defineProps<{
     columns?: Object[]
     dataSource?: Object[]
     skin?: string
     page?: Object
     defaultToolbar?: Boolean
-  }>()
+    checkbox?: Boolean
+    id?: string,
+    selectedKeys: Array<String>
+  }>(),
+  {
+    id: "id",
+    selectedKeys: function() { return [] }
+  }
+)
+
+const tableSelectedKeys = ref(props.selectedKeys)
 
 const emit = defineEmits(['change'])