docs:Ttable组件文档更新

sscfaith · Jan 5, 2024 · 8f63094 · 8f63094
1 parent f4d20ea
commit 8f63094
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 59 deletions.
diff --git a/docs/components/TTable/base.md b/docs/components/TTable/base.md
@@ -174,7 +174,7 @@ TTable/rules
 
 ### 展开行 
 
-:::demo 在`table`对象中添加`firstColumn:{ type: 'expand', fixed: true }` `expand`作用域插槽，结构传出`{scope}`
+:::demo 在`table`对象中添加`firstColumn:{ type: 'expand', fixed: true }` `expand`作用域插槽，解构传出`{scope}`
 TTable/expand
 :::
 
@@ -281,17 +281,13 @@ TTable/expand
 | rowSort       | 行拖拽排序后触发事件         | 返回排序后的table数据                         |
 | validateError | 单元格编辑保存校验不通过触发 | 返回校验不通过的 prop--label 集合             |
 
-### 4、Methods 方法
-
-| 事件名             | 说明                                               | 参数 |
-| :----------------- | :------------------------------------------------- | :--- |
-| clearSelection     | 用于多选表格，清空用户的选择                       | -    |
-| clearSort          | 清空排序条件                                       | -    |
-| toggleRowSelection | 取消某一项选中项                                   | -    |
-| toggleAllSelection | 全部选中                                           | -    |
-| save               | 保存方法（返回编辑后的所有数据）                   | -    |
-| resetFields        | 对表单进行重置，并移除校验结果（单元格编辑时生效） | —    |
-| clearValidate      | 清空校验规则（单元格编辑时生效）                   | -    |
+### 4、Methods 方法 继承el-table所有方法
+
+| 事件名        | 说明                                               | 参数 |
+| :------------ | :------------------------------------------------- | :--- |
+| save          | 保存方法（返回编辑后的所有数据）                   | -    |
+| resetFields   | 对表单进行重置，并移除校验结果（单元格编辑时生效） | —    |
+| clearValidate | 清空校验规则（单元格编辑时生效）                   | -    |
 
 ### 5、Slots插槽
 

diff --git a/docs/examples/TTable/selection.vue b/docs/examples/TTable/selection.vue
@@ -4,12 +4,18 @@
       <t-table
         title="复选框"
         ref="selectionTable"
-        :table="table"
-        :columns="table.columns"
+        :table="state.table"
+        :columns="state.table.columns"
         @selection-change="selectionChange"
         :isShowPagination="false"
       >
         <template #toolbar>
+          <el-button
+            size="default"
+            type="danger"
+            @click="toggleSelection([state.table.data[1], state.table.data[2]])"
+            >点击选中第二第三项</el-button
+          >
           <el-button
             size="default"
             type="primary"
@@ -25,55 +31,64 @@
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
-let table = {
-  firstColumn: { type: 'selection', fixed: true },
-  // 接口返回数据
-  data: [
-    {
-      id: '1',
-      date: '2019-09-25',
-      date1: '2019-09-26',
-      name: '张三',
-      status: '2',
-      address: '广东省广州市天河区',
-    },
-    {
-      id: '2',
-      date: '2019-09-26',
-      date1: '2019-09-27',
-      name: '张三1',
-      status: '1',
-      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
-    },
-    {
-      id: '3',
-      date: '2019-09-26',
-      date1: '2019-09-28',
-      name: '张三1',
-      status: '1',
-      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
-    },
-    {
-      id: '4',
-      date: '2019-09-26',
-      date1: '2019-09-29',
-      name: '张三1',
-      status: '1',
-      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
-    },
-  ],
-  // 表头数据
-  columns: [
-    { prop: 'name', label: '姓名', minWidth: '100' },
-    { prop: 'date', label: '日期', minWidth: '180' },
-    { prop: 'status', label: '状态', minWidth: '80' },
-    { prop: 'address', label: '地址', minWidth: '220' },
-  ],
-}
 // 获取ref
 const selectionTable: any = ref<HTMLElement | null>(null)
+const toggleSelection = (rows?: any) => {
+  if (rows) {
+    rows.forEach((row) => {
+      selectionTable.value!.toggleRowSelection(row, true)
+    })
+  } else {
+    selectionTable.value!.clearSelection()
+  }
+}
 let state = reactive({
   ids: [],
+  table: {
+    firstColumn: { type: 'selection', fixed: true },
+    // 接口返回数据
+    data: [
+      {
+        id: '1',
+        date: '2019-09-25',
+        date1: '2019-09-26',
+        name: '张三',
+        status: '2',
+        address: '广东省广州市天河区',
+      },
+      {
+        id: '2',
+        date: '2019-09-26',
+        date1: '2019-09-27',
+        name: '张三1',
+        status: '1',
+        address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
+      },
+      {
+        id: '3',
+        date: '2019-09-26',
+        date1: '2019-09-28',
+        name: '张三1',
+        status: '1',
+        address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
+      },
+      {
+        id: '4',
+        date: '2019-09-26',
+        date1: '2019-09-29',
+        name: '张三1',
+        status: '1',
+        address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
+      },
+    ],
+    // 表头数据
+    columns: [
+      { prop: 'name', label: '姓名', minWidth: '100' },
+      { prop: 'date', label: '日期', minWidth: '180' },
+      { prop: 'status', label: '状态', minWidth: '80' },
+      { prop: 'address', label: '地址', minWidth: '220' },
+    ],
+  },
 })
 // 选择复选框
 const selectionChange = (val: any) => {