codewave-openclaw-installer 1.0.0

package/skills/smart-customer-service/docs/codewave/20./345/272/224/347/224/250/345/274/200/345/217/221/10./351/241/265/351/235/242/350/256/276/350/256/241/20.PC/347/253/257Vue2/347/273/204/344/273/266/350/257/264/346/230/216/357/274/210/351/273/230/350/256/244/357/274/211/50./350/241/250/346/240/274/100./346/225/260/346/215/256/350/241/250/346/240/274.md

@@ -0,0 +1,932 @@
+# 数据表格
+
+数据表格以二维表格形式呈现数据，通常包含行和列，用于展示相关的数据信息。
+
+例如：展示用户信息表。
+
+<img src="../assets/shujubiaoge_202408211922_1.png" class="imgStyle" style="" />
+
+数据表格通常用于以下场景：
+
+- 当用户需要存储、组织和分析结构化数据时，数据表格可以清晰地展示出数据的所有相关属性。具体常见场景说明请参见[如何在表格中展示实体数据](../../../../80.常见场景案例/40.组件场景/20.表格场景/001.如何在表格中展示实体数据.md)。
+
+- 数据表格具备行和列结构，当用户需要查找或整理数据时，数据表格可以轻松地进行数据过滤和排序，整合符合要求的数据并展示在表格中。具体常见场景说明请参见[如何通过筛选条件查询并显示数据](../../../../80.常见场景案例/40.组件场景/20.表格场景/060.如何通过筛选条件查询并显示数据.md)和[如何设置数据表格的排序规则](../../../../80.常见场景案例/40.组件场景/20.表格场景/008.如何设置数据表格的排序规则.md)。
+  
+<div class="highlight">
+
+在本章节，你将学习：
+
+1.  数据表格的各类属性、事件、可访问属性等基础信息。
+2.  如何使用数据表格的各类属性，具体实现效果包括但不限于
+
+    - 使用数据表格的“数据源”属性，以设置数据表格中展示的数据内容；
+    - 使用数据表格的“树形模式”属性，以实现树状的数据表格；
+    - 使用数据表格的“表格内可拖拽”、”表格间可拖拽“属性，以实现拖拽数据表格行；
+    - 使用数据表格的“虚拟滚动”属性，实现数据表格滚动性能提升；
+    - 使用数据表格的“表格行动态样式”属性，以自定义数据表格的样式;
+
+3.  定义表格列的“列类型”属性，如设置数据表格支持单选、多选、编辑或展开等；
+4.  使用“表格动态列”，以实现动态加载表格列；
+5.  使用“表格列分组”，以实现二级表头；
+6.  使用“表格配置列”，以实现使用开关控制表格列显隐；
+7.  如何使用数据表格的各类组件逻辑，具体实现效果包括但不限于
+
+    - 使用组件逻辑“reload”，以实现重新加载数据表格；
+    - 使用组件逻辑“exportExcel”，以实现将数据表格导出为Excel文件；
+
+8.  如何快速生成一个的数据表格。
+
+</div>
+
+
+## 概念说明
+
+* 表格列：在表格中按照纵向方向排列的数据或信息。
+* 表格动态列：可以根据一定的条件进行动态更新的表格列。
+* 表格列分组：可以包含多个表格列，为多个表格列配置统一的表头。
+* 表格配置列：在使用表格组件时，根据实际需求对表格列的显隐进行设置的功能列。
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 数据表格
+
+#### 数据属性
+
+* 数据源：表格展示的数据的来源。数据源可以绑定List类型变量或输出参数为数组或包含List的匿名数据结构的逻辑，List中的T可以是任意类型（包括List、联合类型）。例如绑定输出结果为{list\:List<{productlnfo\:Productlnfo}>,total:10}的服务端逻辑。
+
+  <div class="highlight">
+
+  当数据表格绑定数据源后，应用自动生成current变量。数据表格会根据数据源中包含的 List 按顺序对每一项进行循环遍历，使用current即可指代在 List 中当前正在访问或操作的对象。为**表格行**或其中的组件编辑表达式或添加事件，即可调用current变量：
+
+  <img src="../assets/biaoge_202412060952_1.png" class="imgStyle" style="width:200px" />
+
+  **所有可绑定数据源的组件同理**。
+
+  在数据表格的属性中设置任意字段（如值字段）时，同样根据字段值进行循环遍历，但不显示其 current.item 前缀。
+
+
+  </div>
+
+  1. 点击“请选择表达式”进入编辑表达式页面，拖入变量或使用调用逻辑组件，可使用组件的可访问属性。
+
+      <img src="../assets/shujubiaoge_202410231529_2.png" class="imgStyle" style="" />
+
+  2. 添加表格列，为表格列设置“列字段“，或向表格列中拖拽放置需要展示组件的组件、为组件绑定数据源中的current.item或其属性，实现动态获取数据。
+
+      <img src="../assets/shujubiaoge_202410231529_3.png" class="imgStyle" style="" />
+
+      <img src="../assets/shujubiaoge_202410231529_4.png" class="imgStyle" style="" />
+
+* 数据类型：数据源返回的数据结构的类型，自动识别类型进行展示说明，为只读状态无法修改。
+* 分页：是否展示分页组件，数据源调用接口是否加入分页参数，默认开启。
+
+  > 说明：
+  > 若为前端分页，所有数据一次性从后端获取，并存储在前端。前端通过控制显示的页数和每页显示的条目数量将数据进行分页展示，不需要与后端进行交互。
+  > 若为后端分页，调用数据查询组件，则依据数据查询组件外嵌套的分页组件进行后端分页。
+  > 若为后端分页，调用接口数据，则依赖接口返回数据自身的分页属性进行后端分页。
+  >
+* 默认每页条数：每页的数据条数。默认20条。在"分页"属性开启时有效。
+* 显示每页条数：分页组件处是否展示数据条数的选择列表。默认开启。在"分页"属性开启时有效。
+* 每页条数选项：分页组件处是否展示每页显示数据条数的选择列表，需设置数组，如[10,20,30,40,50]。在"分页"属性开启时有效。
+* 当前页数：当前加载的表格页。默认1。在"分页"属性开启时有效。
+* 显示总条数：分页组件处是否显示表格总数。默认关闭。在"分页"属性开启时有效。
+* 显示跳转输入：分页组件处是否展示跳转到某一页的输入框。默认关闭。在"分页"属性开启时有效。
+
+  <img src="../assets/sjsjbg_20240307_140151_4.png" alt="0" style="border: 1px solid #ccc;" />
+* 初始化排序规则：支持选择数据表格数据源中的某一字段为排序依据，配置默认排序规则，支持升序和降序。
+* 值字段：在开启了单选、多选操作、渲染树形的表格数据中，指定数据对应的唯一值的字段。默认使用id作为每一行的唯一标识值字段。
+* 单选值：当表格设置了单选列或开启“可选行”属性时，选中某一行时的值。该取值由“值字段”属性决定。默认开启编辑表达式功能。编辑表达式时通常直接绑定变量，如果开启“是否将组件输入赋值给变量“，会根据选择的表格行的“值字段”属性改变变量的值，也会根据变量的值展示当前选择的表格行。
+
+  <img src="../assets/shujubiaoge_202410231529_5.png" class="imgStyle" style="" />
+
+* 多选值：当表格设置了多选列，选择值后获取值列表数组`List<V>`。列表每一项 V 取值由“值字段”属性决定。用法与“单选值”属性类似。
+
+* 树形模式：表格中的数据是否以树型方式展示。默认关闭。
+* 父级值字段：标识父节点字段名，用于标识表格行取哪个属性作为父级的判断，需同步配置“值字段”。在"树形模式"属性开启时有效。
+* 子级值字段：标识子节点字段名，用于标识表格行取哪个属性作为子级的判断，默认值children。在"树形模式"属性开启时有效。
+* 包含子级值字段：表示当前行是否有子节点、是否需要展示子节点的"展开/收起"图标，Boolean类型，默认值hasChildren。在"树形模式"属性开启时有效。
+* 关联选中类型：当选中父节点时，关联节点是否相应选中。在"树形模式"属性开启并且表格存在"多选列"时有效。开启编辑表达式功能后，用于标识"关联选中类型“属性不同选项的对应值如下：
+
+  <img src="../assets/sjsjbg_20240307_140151_6.png" alt="0" style="width:350px;" />
+
+  * 父子双向关联选中：选中当前行时，同时选中当前行的父节点及当前行的所有子孙节点。
+  * 单项父关联子：选中当前行时，同时选中当前行的所有子孙节点。
+  * 单项子关联父：选中当前行时，同时选中当前行的父节点。
+  * 父子不关联：仅选中当前行。
+
+  <div class="highlight">
+
+  树形表格搭建请参考[如何使用数据表格展示树形结构](../../../../80.常见场景案例/40.组件场景/20.表格场景/095.如何使用数据表格展示树形结构.md)。
+
+  若要求树形表格的节点默认展开：
+  
+  - 可以在数据源包含的数据结构中定义Boolean类型属性 treeExpanded ，节点对应的 treeExpanded 属性为 true 即表示默认展开，具体使用说明请参考[如何实现树形节点默认展开](../../../../80.常见场景案例/40.组件场景/20.表格场景/098.如何实现树形节点默认展开.md)。
+  - 也可以调用数据表格的组件逻辑[setAllTreeNodeExpanded](#setalltreenodeexpanded)来展开指定层级范围内的节点。
+
+
+  </div>
+
+#### 主要属性
+
+<img src="../assets/sjsjbg_20240307_140151_7.png" alt="0" style="border: 1px solid #ccc;" />
+
+* 表格标题：表格上方的标题信息。默认为空。
+* 显示表格头部：是否显示表格头。默认开启。
+* 表格头部吸顶：当页面滚动到顶时，表格头是否固定在头部，不随页面滚动。默认关闭。
+* 表头文本过长省略：表格头部文本长度超出表格列宽度时，文本超出部分展示为省略号。
+* 内容区文本过长省略：表格列中文本长度超出表格列宽度时，文本超出部分展示为省略号。
+* 显示表尾计算行：开启后将在表格最下方增加一行，用于统计列的数值，根据表格列的“值字段”属性进行计算，对数字列进行求和、最大值、最小值、平均值的计算，仅针对数字类型数据生效。
+    <img src="../assets/shujubiaoge_pc_202508151450_1.png" class="imgStyle" style="" />
+* 表尾计算行第一列文本：表尾行所展示的头部文本。
+* 表尾计算行功能选项：对数字列的计算方式，包括求和（sum）、最大值（max）、最小值（min）、平均值（average）。
+* 表尾计算行格式设置：默认会直接展示计算之后的数字，可通过编辑表达式来自行组装展示的内容，例如为数字增加前后缀。
+
+#### 交互属性
+
+* 可选行：表格行是否可点击选中，该取值由值字段名决定，一般会是id等能唯一标识每一行数据的值。默认关闭。
+* 可取消：与"可选行"属性对应，表示选中的行再点击时是否可以取消选中。取消后单选值会清空。默认关闭。
+* 表格内可拖拽：开启功能时，支持应用制品用户选中表格行后拖拽放置到该表格的其他位置，拖拽后顺序不影响实际存储顺序。可搭配拖拽标识列使用。默认关闭。具体使用场景如[如何实现表格中数据的拖拽排序](../../../../80.常见场景案例/40.组件场景/20.表格场景/140.如何实现表格中数据的拖拽排序.md)、[如何实现树形表格的拖拽](../../../../80.常见场景案例/40.组件场景/20.表格场景/145.如何实现树形表格的拖拽.md)。
+* 表格间可拖拽：开启功能时，支持应用制品用户选中表格行后拖拽放置到其他表格中，拖拽项的表格和放置项的表格均需要打开“表格间可拖拽”属性。可搭配拖拽标识列使用。默认关闭。具体使用场景如[如何实现多个数据表格间的拖拽](../../../../80.常见场景案例/40.组件场景/20.表格场景/150.如何实现多个数据表格间的拖拽.md)。
+* 可拖拽节点：设置可拖拽表格项的逻辑判断，若对应节点输出结果为 true，则允许拖拽对应节点。默认为 true，即所有节点均可拖拽。开启“表格内可拖拽”或“表格间可拖拽”时有效。
+* 可放置节点：设置可放置表格项的逻辑判断，若对应节点输出结果为 true，则允许向对应节点处放置被拖拽的节点。默认为 true，即所有节点均可放置。开启“表格内可拖拽”或“表格间可拖拽”时有效。
+
+    <div class="highlight">
+
+    “可拖拽节点“和”可放置节点“的编辑表达式中可调用变量 item，即根据数据源动态加载的节点，其数据类型由数据源返回。
+
+    <img src="../assets/shujubiaoge_202410231616_1.png" class="imgStyle" style="" />
+
+    例如：数据源返回的数据结构中包含 Boolean 类型属性，用于定义节点是否允许拖拽，则“可拖拽节点”定义为该属性时，支持动态加载节点是否可拖拽。
+
+    <img src="../assets/shujubiaoge_202410231616_2.png" class="imgStyle" style="" />
+
+    </div>
+
+
+    <div class="highlight">
+
+    开启“表格内可拖拽”或“表格间可拖拽”后，IDE界面展示“拖拽缩略图配置区域”，用户可以自定义表格行被拖拽时展示的缩略图效果。
+
+    <img src="../assets/shujubiaoge_202408211922_4.png" class="imgStyle" style="" />
+
+    如果“拖拽缩略图配置区域”没有添加内容，拖拽时默认展示整行数据。
+
+    <img src="../assets/shujubiaoge_202408211922_5.png" class="imgStyle" style="" />
+    
+    </div>
+
+* 手风琴模式：开启功能时，点击展开行，其他已经展开的行收起。当表格存在"展开列"时有效。默认关闭。
+* 可调整列宽：开启功能时，页面中表格列之间出现调整样式，支持应用制品用户手动调整列宽。默认关闭。
+* 调整列宽效果：表示调整列宽时其他列宽的处理方式。在"可调整列宽"属性开启时有效。
+* 配置展示列：开启功能时，表格头部右侧出现“展示列”选项，支持应用制品用户根据初始化时表格中已展示的所有表格列自由调整表格中展示的表格列。默认关闭。
+
+  <img src="../assets/sjsjbg_20240307_140151_10.png" alt="0" style="border: 1px solid #ccc;" />
+* 虚拟滚动：开启后，数据表格不渲染所有数据，在每次滚动时渲染可视区域内以及可视区域附近的数据、卸载不在区域内的数据。虚拟滚动适用于长列表或大数据集的展示，其目的是提高滚动性能，减少内存占用和渲染时间。
+* 懒加载：开启后，数据表格不加载所有数据，在页面初始加载时只加载可视区域内以及可视区域附近的数据、对于暂时不需要的内容等到滚动到相应位置时再进行加载。懒加载适用于有图片、视频等资源密集的内容展示，其目的是优化初始加载速度，减少不必要的资源加载。
+  
+    <img src="../assets/shujubiaoge_202408211922_7.gif" class="imgStyle" style="" />
+    
+    <div class="highlight">
+
+    开启“虚拟滚动”或“懒加载”时，数据表格必须在样式中设置高度，可以是高度或最大高度。
+
+    <img src="../assets/shujubiaoge_202408211922_6.png" class="imgStyle" style="max-width:300px;" />
+
+    </div>
+
+    
+
+* 每行高度：开启“虚拟滚动”或“懒加载”属性后，为确保数据不换行而设置的高度，当表格中存在树形列时必填。“每行高度”不会影响样式，建议根据样式中的表格行高度设置“每行高度”，例如没有特殊行高时，将”每行高度“设为42。
+
+  <img src="../assets/sjsjbg_20240307_140151_11.png" alt="0" style="border: 1px solid #ccc;" />
+* 展示条数：开启“虚拟滚动”属性后，表格每次渲染的数据数量。
+
+  > 当设置的表格高度大于展示条数所需要的高度时，滚动条不可见，影响虚拟滚动的使用。建议用户在开发过程中注意表格高度、“每行高度”、“展示条数”的搭配使用。
+
+* 缓冲数据量：开启“懒加载”属性后，表格首次加载的数据数量。
+  > 当设置的表格高度大于缓冲数据量所需要的高度时，滚动条不可见，影响懒加载的使用。建议用户在开发过程中注意表格高度、“每行高度”、“缓冲数据量”的搭配使用。
+  
+* 使用原生滚动条：开启时，使用浏览器自带的滚动条来实现滚动功能。关闭时使用在组件中定义滚动条，当数据表格包含开启“固定列”属性的表格列时，不支持开启“使用原生滚动条”。
+
+#### 状态属性
+
+* 初始即加载：页面打开即加载数据。开启时，当数据源为逻辑，加载时自动调用对应逻辑。默认开启。
+* 加载状态设置：可通过切换该选项，设置不同状态时该组件的展示形式，支持配置如下
+
+1. 加载完成-有数据：正常展示数据，无状态配置项。
+2. 加载完成-暂无数据：
+
+   <img src="../assets/sjsjbg_20240307_140151_12.png" alt="0" style="border: 1px solid #ccc;" />
+
+   * 暂无数据提示文案：当表格为空时的提示文字。默认"暂无数据"。
+3. 加载中：
+
+   <img src="../assets/sjsjbg_20240307_140151_13.png" alt="0" style="border: 1px solid #ccc;" />
+
+   * 加载中提示文案：当加载表格数据过程中的提示文字。默认“正在加载中…”。
+   * 自定义加载中触发条件：支持自定义状态的触发条件，未设置则默认为系统定义条件。
+4. 加载失败：
+
+   <img src="../assets/sjsjbg_20240307_140151_14.png" alt="0" style="border: 1px solid #ccc;" />
+
+   * 加载失败提示文案：加载失败的提示文字。默认"加载失败，请重试"。
+   * 自定义加载中触发条件：支持自定义状态的触发条件，未设置则默认为系统定义条件。
+
+* 只读：正常显示，但禁止选择。
+* 禁用：置灰显示，且禁止任何交互，包括焦点、点击、选择等。
+  
+<div class="highlight">
+    
+“只读"和“禁用”属性控制的是组件本身的状态，不涵盖拖拽放置在数据表格中的其他组件，控制其他组件的状态需要设置对应组件的“只读"和“禁用”属性。
+
+</div>
+
+#### 样式属性
+
+* 标题对齐方式：表格上方的标题信息的对齐方式。默认"居中对齐"。
+* 表头加粗：表格每一列的表头文字是否加粗。默认开启。
+* 分隔线条：表格每列之间是否展示分隔线条。默认关闭。
+* 斑马条纹：表格行是否按斑马线条纹显示。默认关闭。
+
+  > 具体应用场景请参考：[如何设置表格为斑马线样式](../../../../80.常见场景案例/40.组件场景/20.表格场景/050.如何设置表格为斑马线样式.md)。
+  >
+* 默认列宽度：表格每列的默认宽度。
+- 表格行动态样式：自定义表格行的背景颜色及文字颜色。默认为编辑表达式，不支持切换常量。
+  
+  <div class="highlight">
+
+  “表格行动态样式”的表达式中默认包含匿名数据结构，匿名数据结构中的backgroundColor属性用于设置表格行背景色、color属性用于设置表格行文字颜色。
+
+  例如：表格行背景色为白色、表格行文字颜色为黑色：
+
+  <img src="../assets/shujubiaoge_202408212108_1.png" class="imgStyle" style="" />
+
+  在匿名数据结构中支持新增对应CSS命名的属性，用于匹配其他表格行样式。
+
+  动态实现表格行样式请参考具体场景：[如何实现动态展示表格行样式](../../../../80.常见场景案例/80.业务场景/145.如何实现动态展示表格行样式.md)。
+
+  </div>
+
+### 表格列
+
+通过设置表格列属性，可自定义表格每列的功能。
+
+<img src="../assets/sjsjbg_20240307_140151_15.png" alt="0" style="border: 1px solid #ccc;" />
+
+#### 数据属性
+
+* 值字段：当前列对应的数据的字段名，如productInfo.name。
+* 排序：开启后该列可按照值字段进行排序，可设置默认顺序，升序或倒序。默认关闭。
+* 排序初始顺序：可设置顺序或倒序。在“排序”属性开启时有效。
+* 列类型：可设置普通列、序号列、单选列、多选列、展开列、树型列、编辑列或拖拽标识列。
+  * 序号列：展示排序序号。
+  * 单选列：展示单选框，选择后，被选中的一列的值字段将作为数据表格的单选值。
+  * 多选列：展示多选框，选择后，被选中的每一列的值字段组成的列表将作为数据表格的多选值。
+  * 展开列：展示标识符，点击标识符后可展开或收缩该行下的更多内容。设为展开列后表格列下方包含如下插槽，展开内容拖拽至插槽内。仅允许将数据表格的其中一列指定为展开列，无法同时设置多列。
+
+    <img src="../assets/shujubiaoge_202408211922_8.png" class="imgStyle" style="" />
+
+  - 树形列：表格列以树型方式展示。开启“树形模式”时生效。
+  - 编辑列：双击表格列后进入可编辑状态，默认输入框失去焦点时更新表格内容。与列字段关联，列字段不能为空。设为编辑列后表格列中包含如下插槽，插槽中为可编辑状态下的表格列内容。
+
+    <img src="../assets/shujubiaoge_202408211922_9.png" class="imgStyle" style="" />
+
+  - 拖拽标识列：展示拖拽标识符。开启拖拽功能仍需在数据属性中打开“可拖拽”属性，否则拖拽效果不生效。
+
+* 换页继续编号：当列类型为"序号列"时有效。支持换页后，继续上一页的列序号进行编号。
+* 起始序号：当列类型为"序号列"时有效。默认值为1。
+
+#### 主要属性
+
+* 固定列：开启后，当表格横向滚动条滚动时，该列会固定不会跟随滚动条滚动。常用于固定首列或尾列。默认关闭。
+* 表头文本过长省略：表格头部文本长度超出表格列宽度时，文本超出部分展示为省略号。优先级高于表格的“表头文本过长省略”属性。
+* 内容区文本过长省略：表格列中文本长度超出表格列宽度时，文本超出部分展示为省略号。优先级高于表格的“内容区文本过长省略”属性。
+* 隐藏列：开启后，该数据列不可见。默认关闭。
+
+#### 样式属性
+
+* 列宽度：指定列宽，可以是数字或百分比，如100（单位为px），或10%。当部分表格列已指定列宽，那么其余未指定列宽的表格列会自动依据表格剩余的可用宽度进行平均分配；而当所有表格列都已明确指定列宽，但其指定宽度总和小于表格的整体宽度时，所有表格列将统一按照表格的实际宽度进行平均分配，以确保表格的合理展示。 
+* 合并列数：横向合并表格列的数量。为空时值默认为1，即不合并。
+* 自动合并相同数据：开启后，根据表格列的“值字段”纵向合并相邻的相同数据。默认关闭。
+> 表格也支持通过数据源设置合并规则，具体应用场景请参考[如何动态合并表格中的相同数据](../../../../80.常见场景案例/40.组件场景/20.表格场景/090.如何动态合并表格中的相同数据.md)。
+
+### 表格动态列
+
+通过设置表格列的数据源，根据数据源的数量动态生成表格列数。
+
+<img src="../assets/sjsjbg_20240307_140151_16.png" alt="0" style="border: 1px solid #ccc;" />
+
+#### 数据属性
+
+* 表格动态列的数据源：表格列展示的数据。数据源可以绑定 List类型变量或输出参数为数组或包含List的匿名数据结构的逻辑。
+
+  <div class="highlight">
+ 
+  当添加表格动态列时，数据表格的数据源的数据类型通常设置为`List<固定列，Map<key,value>>`，其中key需要与动态列的数据源相对应，例如动态列的数据源为`List<date:Date>`，数据表格的数据源为`List<name:String,Map<date:Date,score:Integer>>`。
+  
+
+  </div>
+* 数据类型：表格每一列的数据类型。该属性为展示属性，由数据源推导得到，无需填写。
+* 值字段：动态表格列对应的值的字段名。
+* 排序：开启后动态列可排序，可设置默认顺序，升序或倒序。默认关闭。
+
+  > 主要属性和样式属性和表格列相同。
+  >
+
+效果演示：
+
+1. 绑定数据表格数据源后中，将表格动态列的数据源绑定类型为 `List<Integer>`的变量，本示例的list_int中存储有3条数据，内容为[1,2,3]。
+
+   <img src="../assets/sjsjbg_20240307_140151_17.png" alt="0" style="border: 1px solid #ccc;" />
+2. 表格动态列包含columnItem属性，支持动态显示表格动态列内容。例如本示例中将动态表格列的标题设置为current.columnitem。
+
+   <img src="../assets/sjsjbg_20240307_140151_18.png" alt="0" style="border: 1px solid #ccc;" />
+3. 下图为制品应用效果
+
+   <img src="../assets/sjsjbg_20240307_140151_19.png" alt="0" style="border: 1px solid #ccc;" />
+
+   > 动态实现数据表格列的具体方法请参考：[如何设置表格动态列-1](../../../../80.常见场景案例/40.组件场景/20.表格场景/086.如何设置表格动态列-1.md)，[如何设置表格动态列-2](../../../../80.常见场景案例/40.组件场景/20.表格场景/086.如何设置表格动态列-2.md)。
+   >
+
+### 表格列分组
+
+通过为表格添加表格列分组，并在表格列分组内添加表格列，可以为表格列分组内所有表格列添加统一的表头，实现二级表头。
+
+<img src="../assets/biaoge_202411121552_1.png" class="imgStyle" style="" />
+
+实现二级表头的常见操作如下：
+
+- 选中表格列分组，添加表格列或表格动态列；
+  
+  <img src="../assets/biaoge_202411131123_1.gif" class="imgStyle" style="" />
+
+- 向表格列分组中拖拽表格列或表格动态列。
+
+  <img src="../assets/biaoge_202411131123_2.gif" class="imgStyle" style="" />
+
+
+
+### 表格配置列
+
+当数据表格开启“配置展示列“时，应用会自动生成表格配置列，支持设置表格配置列的属性。
+
+<img src="../assets/sjsjbg_20240307_140151_21.png" alt="0" style="border: 1px solid #ccc;" />
+
+#### 数据属性
+
+* 数据源：表格配置列展示的数据的来源。当表格配置列未绑定数据源时，数据源默认为当前表格下所有表格列的**非空值字段**的集合。
+* 数据类型：数据源返回的数据结构的类型，自动识别类型进行展示说明，为只读状态无法修改。
+* 值字段：绑定数据源后，用于标识表格配置列数据被选中时获得到的值的字段。
+* 值：表格配置列选中项的集合，支持 `List<T>`类型。通常在开启编辑表达式功能后绑定 `List<T>`类型变量，用于在变量中动态保存表格配置列选中值。
+  * 未绑定数据源时，“值”由被选中的非空值字段名组成。例如图中表格列的值字段分别为product.name、product.num和product.price，当“值”属性绑定类型为 `List<String>`的变量，且表格配置列选中表格列，此时“值”属性的值为 `[product.name,product.num,product.price]`。
+  * 绑定数据源时，“值”由表格配置列的“值字段”决定。
+
+> 表格配置列具体应用场景请参考：[如何配置表格展示列](../../../../80.常见场景案例/40.组件场景/20.表格场景/020.如何配置表格展示列.md)。
+
+#### 主要属性
+
+* 确定/取消按钮：是否展示按钮。如果功能开启，需点击确定后配置表格展示列并获取“值”属性新的值；如果功能不开启，修改表格配置列时直接修改表格展示列并获取“值”属性新的值。
+
+### 展开列图标
+
+当表格列列类型为“展开列“时，支持配置展开列图标。
+
+<img src="../assets/shujubiaoge_202408211922_10.png" class="imgStyle" style="" />
+
+#### 主要属性
+
+- 展开时图标：设置展开列内容展开时的图标，可从图标库选择图标或上传自定义图标，上传图标仅支持SVG格式。
+- 关闭时图标：设置展开列内容折叠时的图标，可从图标库选择图标或上传自定义图标，上传图标仅支持SVG格式。
+
+## 事件
+
+### 表格事件
+
+| 事件名   | 描述                    |
+| :---- | :-------------------- |
+| [加载前](#加载前-加载后)  | 组件数据源绑定逻辑调用前触发该事件中的逻辑 |
+| [加载后](#加载前-加载后)  | 组件数据源绑定逻辑调用后触发该事件中的逻辑 |
+| [切换分页前](#切换分页前-切换分页后)| 初始化分页前和分页切换前触发该事件中的逻辑 |
+| [切换分页后](#切换分页前-切换分页后)| 初始化分页后和分页切换后触发该事件中的逻辑 |
+| [排序前](#排序前-排序后)  | 排序完成前触发该事件中的逻辑。       |
+| [排序后](#排序前-排序后)  | 排序完成后触发该事件中的逻辑。       |
+| [点击行](#点击行-双击行)  | 点击某一行时触发该事件中的逻辑。      |
+| [双击行](#点击行-双击行)  | 双击某一行时触发该事件中的逻辑。      |
+| [选择前](#选择前)  | 选择某一项前触发该事件中的逻辑。      |
+| [选择触发](#选择触发) | 选择某一项时触发该事件中的逻辑。      |
+| [选择后](#选择后)  | 选择某一项后触发该事件中的逻辑。      |
+| [多选后](#多选后)  | 选择某一项后触发该事件中的逻辑。      |
+| [改变后](#改变后) | 选择值改变时触发该事件中的逻辑。      |
+| [调整列宽后](#调整列宽后)| 改变列宽后触发该事件中的逻辑。       |
+| [展开行前](#展开行前) | 展开或折叠行前触发该事件中的逻辑。     |
+| [展开行后](#展开行后) | 展开或折叠行后触发该事件中的逻辑。     |
+| [拖拽开始时](#拖拽开始时-拖拽经过时-拖拽放置时)| 开始拖拽时触发该事件中的逻辑。       |
+| [拖拽经过时](#拖拽开始时-拖拽经过时-拖拽放置时)| 拖拽经过其他行时触发该事件中的逻辑。    |
+| [拖拽放置时](#拖拽开始时-拖拽经过时-拖拽放置时)| 拖拽完成时触发该事件中的逻辑。       |
+
+#### 加载前 / 加载后
+
+- 事件概述：
+
+    - 加载前：组件数据源绑定逻辑调用前触发该事件中的逻辑。
+    - 加载前：组件数据源绑定逻辑调用后触发该事件中的逻辑。
+- 其他说明：触发事件的前提条件是数据表格的数据源使用调用逻辑。
+
+#### 切换分页前 / 切换分页后
+
+- 事件概述：
+
+    - 切换分页前：初始化分页前和分页切换前触发该事件中的逻辑。
+    - 切换分页后：初始化分页后和分页切换后触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/shujubiaoge_202408211922_11.png" class="imgStyle" style="width:200px;" />
+
+  - size：Integer类型。当前每页条数。
+  - oldSize：Integer类型。切换分页前的每页条数。
+  - number：Integer类型。当前页数。
+  - oldNumber：Integer类型。切换分页前的页数。
+- 其他说明：触发事件的前提条件是开启数据表格”分页“属性。
+
+#### 排序前 / 排序后
+
+- 事件概述：
+
+    - 排序前：排序完成前触发该事件中的逻辑。
+    - 排序后：排序完成后触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/shujubiaoge_202510291518_1.png" class="imgStyle" style="width:200px;" />
+
+  - field：String类型。排序的字段名。
+  - order：String类型。排序规则，desc或asc。
+- 其他说明：触发事件的前提条件是开启数据列”排序“属性。
+
+#### 点击行 / 双击行
+
+- 事件概述：
+
+  - 点击行：点击某一行时触发该事件中的逻辑。
+  - 双击行：双击某一行时触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/shujubiaoge_202408211922_13.png" class="imgStyle" style="width:200px;" />
+
+  - item：Object类型。当前点击的数据对象。
+  - index：Integer类型。当前点击数据的索引。
+  - rowIndex：Integer类型。当前点击数据的行索引。
+
+#### 选择前
+
+- 事件概述：选择某一项前触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/shujubiaoge_202408211922_14.png" class="imgStyle" style="width:200px;" />
+
+  - item：Object类型。当前选择数据的对象。
+  - oldItem：（空）。
+  - oldValue：（空）。
+  - value：（空）。
+- 其他说明：触发事件的前提条件是开启数据表格“可选行”属性或将表格列设置为“单选列“。
+
+#### 选择触发
+
+- 事件概述：选择某一项时触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/shujubiaoge_202408211922_15.png" class="imgStyle" style="width:200px;" />
+
+  - event：数据类型由数据表格“值字段“属性的数据类型决定。当前选择数据的选中值，值与数据表格“单选值”属性相同。
+- 其他说明：触发事件的前提条件是开启数据表格“可选行”属性或将表格列设置为“单选列“。
+
+#### 选择后
+
+- 事件概述：选择某一项后触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/shujubiaoge_202408211922_16.png" class="imgStyle" style="width:200px;" />
+
+  - index：Integer类型。当前选择数据的索引。
+  - item：Object类型。当前选择数据的对象。
+  - oldItem：Object类型。更改选择前选择数据的对象。
+  - oldValue：（空）。
+  - selectedItem：Object类型。当前选择数据的对象。
+  - value：数据类型由数据表格“值字段“属性的数据类型决定。当前选择数据的选中值，值与数据表格“单选值”属性相同。
+- 其他说明：触发事件的前提条件是开启数据表格“可选行”属性或将表格列设置为“单选列“。
+
+#### 多选后
+
+- 事件概述：选择某一项后触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/shujubiaoge_202408211922_17.png" class="imgStyle" style="width:200px;" />
+
+  - checked：Boolean类型。当前选择数据的选中状态。
+  - oldChecked：（空）。
+  - values：`List<V>`类型，V由数据表格“值字段“属性的数据类型决定。当前选择数据的选中值的列表，值与数据表格“多选值”属性相同。
+  - oldValues：（空）。
+  - item：Object类型。当前选择数据的对象。
+- 其他说明：触发事件的前提条件是将表格列设置为“多选列“。
+
+#### 改变后
+
+- 事件概述：选择值改变时触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/shujubiaoge_202408211922_18.png" class="imgStyle" style="width:200px;" />
+
+  - value：数据类型由数据表格“值字段“属性的数据类型决定。当前选择数据的选中值，值与数据表格“单选值”属性相同。将表格列设置为“单选列“时生效。
+  - oldValue：数据类型由数据表格“值字段“属性的数据类型决定。更改选择前选择数据的选中值。将表格列设置为“单选列“时生效。
+  - item：Object类型。当前选择数据的对象。将表格列设置为“单选列“时生效。
+  - oldItem：Object类型。更改选择前选择数据的对象。将表格列设置为“单选列“时生效。
+  - values：`List<V>`类型，V由数据表格“值字段“属性的数据类型决定。当前选择数据的选中值的列表，值与数据表格“多选值”属性相同。将表格列设置为“多选列“时生效。
+  - oldValues：`List<V>`类型，V由数据表格“值字段“属性的数据类型决定。更改选择前选择数据的选中值的列表。将表格列设置为“多选列“时生效。
+  - items：`List<Object>`类型。当前选择数据的对象的列表。将表格列设置为“多选列“时生效。
+
+#### 调整列宽后
+
+- 事件概述：改变列宽后触发该事件中的逻辑。
+- 其他说明：触发事件的前提条件是开启数据表格”可调整列宽“属性。
+
+#### 展开行前
+
+- 事件概述：展开或折叠行前触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/shujubiaoge_202408211922_19.png" class="imgStyle" style="width:200px;" />
+
+  - item：Object类型。当前数据的对象。
+  - expanded：Boolean类型。当前数据是否为展开状态。
+  - oldExpanded：Boolean类型。当前数据之前是否为展开状态。
+- 其他说明：触发事件的前提条件是将表格列设置为“展开列“。
+
+#### 展开行后
+
+- 事件概述：展开或折叠行后触发该事件中的逻辑。
+
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/shujubiaoge_202408211922_20.png" class="imgStyle" style="width:200px;" />
+
+  - item：Object类型。当前数据的对象。
+  - expanded：Boolean类型。当前数据是否为展开状态。
+- 其他说明：触发事件的前提条件是将表格列设置为“展开列”。
+
+#### 拖拽开始时 / 拖拽经过时 / 拖拽放置时
+
+- 事件概述：
+
+    - 拖拽开始时：开始拖拽时触发该事件中的逻辑。
+    - 拖拽经过时：拖拽经过其他行时触发该事件中的逻辑。每次经过表格行时均触发。
+    - 拖拽放置时：拖拽完成时触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。拖拽开始时事件中仅source属性下的值有效；拖拽经过时事件中仅target属性下的值有效；拖拽放置时以上所有属性下的值均有效。
+
+  <img src="../assets/shujubiaoge_202408211922_21.png" class="imgStyle" style="width:200px;" />
+
+  - source.parent：Object类型。被拖拽的数据的父级数据的对象。数据表格开启“树形模式”后可获取该值，否则为undefined。
+  - source.item：Object类型。被拖拽的数据的对象。
+  - source.level：Integer类型。被拖拽的数据在树形模式下的层级。数据表格开启“树形模式”后可获取该值，否则为undefined。
+  - souce.index：Integer类型。被拖拽的数据的索引。
+  - target.parent：Object类型。拖拽经过的数据的父级数据的对象。数据表格开启“树形模式”后可获取该值，否则为undefined。
+  - target.item：Object类型。拖拽经过的数据的对象。
+  - target.level：Integer类型。拖拽经过的数据在树形模式下的层级。数据表格开启“树形模式”后可获取该值，否则为undefined。
+  - target.index：Integer类型。拖拽经过的数据的索引。
+  - finalSouce.parent：Object类型。拖拽放置位置的父级数据的对象。数据表格开启“树形模式”后可获取该值，否则为undefined。
+  - finalSouce.item：Object类型。被拖拽的数据的对象。
+  - finalSouce.level：Integer类型。拖拽放置位置在树形模式下的层级。数据表格开启“树形模式”后可获取该值，否则为undefined。
+  - finalSouce.index：Integer类型。拖拽放置位置的索引。
+  - position：String类型。指定拖拽放置位置在拖拽经过数据之前或之后，为insertBefore或insertAfter。
+  - updateDate.sourceList：`List<Object>`类型。与被拖拽数据拖拽放置前同层级的对象的列表。列表顺序为拖拽放置后。
+  - updateDate.targetList：`List<Object>`类型。与拖拽放置位置同层级的数据的对象的列表。列表顺序为拖拽放置后。
+
+- 其他说明：触发事件的前提条件是开启数据表格“表格内拖拽“或“表格间拖拽”属性。
+
+### 表格配置列事件
+
+| 事件名 | 描述                |
+| :-- | :---------------- |
+| [选择后](#选择后-1) | 选择表格配置项后触发该事件中的逻辑 |
+
+#### 选择后
+
+- 事件概述：选择表格配置项后触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，仅在表格配置列的数据源自定义时有值，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/shujubiaoge_202408211922_22.png" class="imgStyle" style="width:200px;" />
+
+  - item：Object类型。当前选择数据的对象。
+  - oldItem：（空）。
+  - oldValue：String类型。更改选择前选择数据的选中值，多个选中项的值之间以“,“分隔。
+  - selectedItem：（空）。
+  - value：String类型。当前选择数据的选中值，多个选中项的值之间以“,“分隔。
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用表格组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/shujubiaoge_202408211922_24.png" class="imgStyle" style="width:300px;" />
+
+### 数据表格
+
+*   data（数据）：`List<T>`类型，数据表格内容的数据集合，来源于数据表格的数据源。支持获取。
+*   total（数据总数）：Integer类型，数据表格数据总数，来源于数据表格的数据源。支持获取。
+*   size（分页大小）：Integer类型，数据表格当前每页条数。支持获取。
+*   page（当前页数）：Integer类型，数据表格当前页数。支持获取。
+*   sort（排序属性）：String类型，排序的字段名。支持获取。
+*   order（排序方式）：String类型，排序规则，desc或asc。支持获取。
+*   value（单选值）：数据类型由数据表格“值字段“属性的数据类型决定，数据表格的单选值，值与”单选值“属性对齐。支持获取。
+*   values（多选值）：`List<V>`类型，V由数据表格“值字段“属性的数据类型决定，数据表格的多选值，值与“多选值“属性对齐。支持获取。
+*   disabled（禁用）：Boolean类型，数据表格是否禁用，值与“禁用”属性对齐。支持获取和赋值。
+*   readonly（只读）：Boolean类型，数据表格是否只读，值与“只读”属性对齐。支持获取和赋值。
+*   \_if（显示条件）：Boolean类型，数据表格是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+### 表格列
+
+*   \_if（显示条件）：Boolean类型，表格列是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+### 表格动态列
+
+*   data（数据）：`List<T>`类型，表格动态列内容的数据集合，来源于表格动态列的数据源。支持获取。
+*   \_if（显示条件）：Boolean类型，表格动态列是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+### 表格分组
+
+*   \_if（显示条件）：Boolean类型，表格分组是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+### 表格配置列
+
+*   \_if（显示条件）：Boolean类型，表格配置列是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+### 展示列图标
+
+*   \_if（显示条件）：Boolean类型，展示列图标是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+
+## 组件逻辑
+
+页面添加数据表格组件后，支持调用数据表格的内置逻辑，内置逻辑有：
+
+| 逻辑名                    | 描述                  |
+| :--------------------- | :------------------ |
+| reload                 | 清除缓存，重新加载数据。        |
+| loadTo                 | 跳转至数据表格的指定页码。       |
+| getFields              | 获取表格列的值字段名。         |
+| setAllTreeNodeExpanded | 展开或关闭指定层级范围内的所有树节点。 |
+| setTreeNodeExpanded    | 展开或关闭指定树节点。         |
+| exportExcel            | 将数据表格导出为Excel文件。    |
+| resetEdit              | 重置编辑列的编辑状态为非编辑态。    |
+
+<img src="../assets/biaoge_202503311522_1.png" class="imgStyle" style="width:400px" />
+
+
+### reload
+
+- 逻辑概述：清除缓存，重新加载数据。
+- 示例：
+
+    - 数据表格的数据源调用了查询数据的逻辑，逻辑基于特定的输入参数来筛选并返回所需的数据集。在事件被触发时（如用户更改筛选条件、点击刷新按钮等），执行reload操作以重新加载经过筛选的数据。
+
+      <img src="../assets/shujubiaoge_202408211922_26.png" class="imgStyle" style="" />
+
+    - 数据表格的数据源调用了查询数据的逻辑，逻辑的输出数据支持在页面中被修改。在事件被触发时（如数据的增、删、改），执行reload操作以重新加载修改后的数据。
+
+      <img src="../assets/shujubiaoge_202408211922_27.png" class="imgStyle" style="" />
+
+- 其他说明：
+  - 当数据表格的数据源添加了监听变量，被监听的变量改变时将自动触发数据表格的reload。详细说明请参考[组件通用属性说明](../../17.组件通用属性说明.md)-监听变量。
+  - 当数据表格的数据源为经过处理的动态数据，即非直接绑定变量，例如在数据源中使用内置函数处理变量或逻辑，初始化数据表格和更新动态数据后需要调用组件 reload 重新加载数据表格。相关问题详情请参考[动态数据源获取不到数据](../../../../93.版本更新说明/001.版本兼容性问题说明.md)。
+
+### loadTo
+
+- 逻辑概述：跳转至数据表格的指定页码。
+- 输入参数：
+
+    - page：Integer类型必填参数。指定跳转的页码。
+
+### getFields
+
+- 逻辑概述：获取表格列的值字段名。
+- 输出参数：String类型。各表格列的值字段名以“,”分隔，例如“project.name,project.status”。
+- 其他说明：表格列的“值字段”属性为空时，输出参数中不会包含其值字段名。
+
+### setAllTreeNodeExpanded
+
+- 逻辑概述：展开或关闭指定层级范围内的所有树节点。
+- 输入参数：
+
+    - expanded：Boolean类型选填参数。指定树节点的操作行为，即控制树节点是展开还是关闭。当取值为true时，树节点将被展开；取值为false时，树节点将被关闭。默认值为false。
+    - level：Integer类型选填参数。指定需要展开或关闭的树节点的层级范围。例如，当level的值为 2 时，表示对最外层开始的两层树节点执行展开或关闭操作。默认值为 0，表示对所有树节点执行展开或关闭操作。
+- 示例：在页面的“进入时”事件中调用该组件逻辑，并为输入参数expanded填写true，即可满足树形表格的节点默认展开。
+
+<img src="../assets/biaoge_202503311522_2.png" class="imgStyle" style="" />
+
+### setTreeNodeExpanded
+
+- 逻辑概述：展开或关闭指定树节点。
+- 输入参数：
+
+    - value：V类型必填参数，V由数据表格“值字段“属性的数据类型决定。指定需要展开或关闭树节点的值。
+    - expanded：Boolean类型选填参数。指定树节点的操作行为，即控制树节点是展开还是关闭。当取值为true时，树节点将被展开；取值为false时，树节点将被关闭。默认值为false。
+- 其他说明：不允许指定最底层树节点。
+
+### exportExcel
+
+- 逻辑概述：将数据表格导出为Excel文件。
+- 输入参数：
+
+    - page：Integer类型选填参数。指定导出数据的起始页码，默认为1。
+    - size：Integer类型选填参数。指定导出数据的条数，默认为2000。
+    - filename：String类型选填参数。指定导出的文件名称。
+    - sort：String类型选填参数。指定表格列的值字段名，要求导出数据按照指定表格列排序。
+    - order：String类型选填参数。指定排序方式，传入desc为降序、asc为升序。
+    - excludeColumns：`List<String>`类型选填参数。指定Excel导出时不包含哪些列，里面存放中文列名集合，默认为空列表，即导出所有表格列。
+    - includeStyles：Boolean类型选填参数。是否带样式，携带样式包含数据表格所有非hover状态的主题样式，如字体格式（字体、字号、颜色等）、单元格背景颜色、边框样式、对齐方式等。默认为false。
+
+- 示例：[如何将数据表格导出为Excel](../../../../80.常见场景案例/80.业务场景/100.如何将数据表格导出为Excel.md)。
+- 其他说明：
+
+    - 导出excel文件逻辑（exportExcel）最大支持一次性导出20万条数据，注意导出的数据越多则耗时越久，请根据实际情况配置导出的数量。
+
+    - 导出的表格内容存在大量###的情况，需要手动调大excel文件的列宽度，即可正常显示。
+
+      <img src="../assets/shujubiaoge_202408211922_28.png" class="imgStyle" style="" />
+
+    - 如果待导出的数据量比较大，或者希望不依赖于数据表格组件，可以通过数据导出依赖库来导出表格文件，文档请参考：[如何将大量数据导出为Excel](../../../../80.常见场景案例/82.大量数据处理专题/080.如何将大量数据导出为Excel.md)。
+    - 如果表格开启了懒加载，则只能导出部分数据，无法导出完整数据，懒加载的表格请使用其他方案导出Excel：[如何将大量数据导出为Excel](../../../../80.常见场景案例/82.大量数据处理专题/080.如何将大量数据导出为Excel.md)。
+
+### resetEdit
+
+- 逻辑概述：重置编辑列的编辑状态为非编辑态。
+- 输入参数：
+
+    - item：选填参数。需要被重置状态的表格行。
+- 示例：[如何实现点击数据表格修改数据](../../../../80.常见场景案例/40.组件场景/20.表格场景/130.如何实现点击数据表格修改数据.md)。
+- 其他说明：该组件逻辑通常在表格列的“列类型”属性为编辑列时使用。
+
+## 插槽
+
+数据表格组件中包含插槽，支持拖拽放置其他组件：
+
+- 表格列头部包含插槽。常见用法如：指示当前表格列的标题信息。若为表格动态列，插槽中的组件支持根据动态表格列的数据源来配置信息并动态加载。
+
+  <img src="../assets/shujubiaoge_202408211922_29.png" class="imgStyle" style="" />
+
+- 表格列包含插槽。插槽中的组件支持根据数据表格的数据源来配置信息并动态加载。常见用法如：指示当前表格列的行内容。
+
+  <img src="../assets/shujubiaoge_202408211922_30.png" class="imgStyle" style="" />
+
+  <div class="highlight">
+
+  当表格列的插槽中不包含任何组件（包括布局组件）时，制品应用中显示的表格列会根据值字段动态加载文本，其效果等同于拖入文本组件并为文本组件绑定current变量下对应值字段的值。
+
+  <img src="../assets/shujubiaoge_202408211922_31.png" class="imgStyle" style="" />
+
+  </div>
+
+> 更多插槽说明与属性相关。
+
+## 样式
+
+> 通用样式说明请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+*   行
+
+    *   表格行背景色（hover状态）：鼠标悬浮到该表格行时表格行所显示的背景色，如 #223325
+    *   表格条纹展示行背景色：如 #223325。即奇偶行表格的背景色设置
+*   表头
+
+    *   表格表头字体大小：如 1px
+    *   表格表头文字颜色：如 #223325
+    *   表格表头字体对齐方式：如 left。有三种取值：left、center、right
+    *   表格表头行高：如 1px
+    *   表格表头内间距：如 1px
+    *   表格表头内背景色：如 #223325
+*   内容区
+
+    *   表格内容区边框颜色：如 #223325
+    *   表格内容区文字颜色：如 #223325
+    *   表格内容区行高：如 1px
+    *   表格内容区内边距：如 1px
+    *   表格列内容区背景色：如 #223325
+*   其他
+
+    *   表格拖拽放置示意线颜色：如 #223325。在表格开启拖拽的时候有效
+    *   表格拖拽放置示意框背景颜色：如 #223325。在表格开启拖拽的时候有效
+    *   表格被拖拽行子树背景颜色：如 #223325
+    *   表格被拖拽行背景颜色：如 #223325
+    *   拖拽鼠标样式：如move。开启数据表格“可拖拽”属性时生效，其他可取值例如copy、grab
+    *   拖拽鼠标样式（禁用状态）：表格行禁止拖拽时的鼠标样式
+    *   拖拽图标颜色：拖拽样式的颜色。如 #223325
+
+组件支持在**样式**->**主题样式**中调整当前单个组件的主题样式；也支持在**自定义主题样式**->**组件主题配置**中调整当前类型组件在应用中的所有样式，并支持直接预览效果。
+
+> 推荐前往组件主题配置中查看各主题样式的效果，相关文档请参考[自定义主题样式](../../../60.可视化开发界面/70.更多设置/30.自定义主题样式.md)。
+
+<img src="../assets/biaoge_202411111754_1.png" class="imgStyle" style="" />
+
+
+## 使用说明
+
+- 可直接拖拽实体生成数据表格。
+
+  拖拽实体后可选择列表（全）或列表（简），列表（全）同时包含创建、筛选、删除数据的功能，列表（简）仅生成数据表格用于展示实体数据以及删除数据功能。
+
+  <img src="../assets/shujubiaoge_202408211922_32.png" class="imgStyle" style="" />
+
+  应用支持自动生成查询实体全部数据的服务端逻辑并绑定为数据表格的数据源。展示的表格列根据实体的“显示在表格”配置、自动配置值字段，若不符合要求，可根据具体需求修改。
+
+  <img src="../assets/shujubiaoge_202408211922_33.png" class="imgStyle" style="" />
+
+  <img src="../assets/shujubiaoge_202408211922_34.png" class="imgStyle" style="" />
+
+
+- 当数据表格的数据源为调用逻辑时，在新增、修改、删除数据等操作后，一般调用reload逻辑重新加载表格数据，用户修改信息后会即时呈现数据；当数据表格的数据源为变量时，变量支持在事件发生后动态更新，无需调用逻辑重新加载。
+
+
+## 示例
+
+### 需求场景
+
+在数据表格中实现批量删除功能(蓝)；对字段进行信息的补充(绿)；双击后对字段进行信息的修改（黄）；固定表格操作列(红)。
+
+<img src="../assets/sjsjbg_20240307_140151_38.png" alt="0" style="border: 1px solid #ccc;" />
+
+### 功能要求
+
+* 多选列：对表格内的数据进行批量删除。
+
+  1. 设置多选列属性。
+  2. 获取数据对应的id数组。
+  3. 调用删除逻辑。
+
+* 展开列：对表格内某个字段进行信息扩充。
+* 固定列：对表格操作列进行固定，左右拖动数据表格时被固定列不移动。
+* 编辑列：对表格内的单个数据进行修改。
+
+### 操作步骤
+
+#### 多选列
+
+1. 对数据表格首列属性设置为多选列，并删除表格列中自带的文本。
+
+    <img src="../assets/sjsjbg_20240307_140151_39.png" alt="0" style="border: 1px solid #ccc;" />
+2. 添加一个类型为 list的变量listTabled，将变量绑定到数据表格多选值属性。
+
+    > 值字段所写字段的类型即为多选值的字段类型，此时字段为 id 为 Integer 类型，故接收变量为 List 类型。
+
+    <img src="../assets/sjsjbg_20240307_140151_40.png" alt="0" style="border: 1px solid #ccc;" />
+3. 为批量删除按钮添加点击事件，当listTabledId非空时，调用批量删除逻辑。完成后使用内置逻辑Clear清空listTabledId并调用重新加载数据表格逻辑。
+
+    <img src="../assets/sjsjbg_20240307_140151_41.png" alt="0" style="border: 1px solid #ccc;" />
+
+#### 展开列
+
+1. 选择某一表格列作为触发展开的列，在属性中设置展开列。
+
+    <img src="../assets/sjsjbg_20240307_140151_42.png" alt="0" style="border: 1px solid #ccc;" />
+2. 拖入文本，设置对应补充信息与文本，发布即可实现补充信息扩展。
+
+    <img src="../assets/sjsjbg_20240307_140151_43.png" alt="0" style="border: 1px solid #ccc;" />
+
+#### 固定列
+
+1. 选择操作列，在属性中设置中打开固定列属性。
+
+    <img src="../assets/sjsjbg_20240307_140151_44.png" alt="0" style="border: 1px solid #ccc;" />
+2. 设置表格列宽度，当所有列宽度之和大于表格宽度时即可实现表格拖拽固定效果。
+
+    <img src="../assets/sjsjbg_20240307_140151_45.png" alt="0" style="border: 1px solid #ccc;" />
+
+#### 编辑列
+
+1. 选择需要扩展的列，在属性中设置编辑列。选择后，应用会生成编辑状态下的组件，默认为对应数据类型的输入框。
+
+    <img src="../assets/sjsjbg_20240307_140151_46.png" alt="0" style="border: 1px solid #ccc;" />
+2. 在输入框失去焦点时添加重置编辑和更新事件逻辑。当绑定数据源由应用自动生成时，该逻辑无需用户添加。
+
+    <img src="../assets/sjsjbg_20240307_140151_47.png" alt="0" style="border: 1px solid #ccc;" />
+
+    > 更多表格常用场景请参考文档中心的**常见场景案例**。
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">有鲤</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2025年10月29日</span>
+</div>
+
+<style>
+.highlight {
+    border: 1px solid #679CF8; /* 添加边框 */
+    border-radius: 6px;
+    background-color: #F8FCFF; /* 添加底色 */
+    padding: 10px 20px 10px 20px;
+    margin-bottom:20px;
+    margin-top:20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+</style>