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/26.PC/347/253/257Vue3/347/273/204/344/273/266/350/257/264/346/230/216/50./350/241/250/346/240/274/10./346/225/260/346/215/256/350/241/250/346/240/274.md

@@ -0,0 +1,529 @@
+# 数据表格
+
+<span class="tag-blue">Vue3</span> <span class="tag-yellow">PC</span>
+
+数据表格以二维表格形式呈现数据，通常包含行和列，用于展示相关的数据信息。
+
+<img src="../assets/shujubiaoge_202512301744_1.png" class="imgStyle" style="" />
+
+<div class="highlight">
+
+在本章节，你将学习：
+
+1.  数据表格的各类属性、事件、可访问属性等基础信息。
+2.  如何使用数据表格的各类属性，具体实现效果包括但不限于
+
+    - 使用数据表格的“数据源”属性，以设置数据表格中展示的数据内容；
+    - 使用数据表格的“分页”属性，以实现分页展示的数据表格；
+    - 使用数据表格的“父级值字段”属性，搭配“唯一标识”，当表格中的数据需要以树形方式展示时，依据该字段动态构建层级；
+    - 使用数据表格的“单选行”、“单选选中值”、“多选选中值”属性，获取数据表格选中某一行时的值；
+
+3.  定义表格列的“列类型”属性，如设置数据表格支持多选、序号、编辑或展开等；
+4.  使用“表格列动态”，以实现动态加载表格列；
+5.  如何使用数据表格的组件逻辑，具体实现效果包括但不限于
+
+    - 使用数据表格的组件逻辑“reload”，以实现重新加载数据表格。
+
+6.  如何快速生成一个的数据表格。
+
+</div>
+
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 数据表格
+
+#### 数据属性
+
+- 数据源：表格展示的数据的来源。数据源可以绑定`List<T>`类型变量或输出参数为数组或包含`List<T>`的匿名数据结构的逻辑，List中的T可以是任意类型（包括`List<T>`、联合类型）。例如绑定输出结果为`{list:List<{productlnfo:Productlnfo}>,total:10}`的服务端逻辑。
+
+    <div class="highlight">
+
+    当数据表格绑定数据源后，应用自动生成current变量。数据表格会根据数据源中包含的 List 按顺序对每一项进行循环遍历，使用current即可指代在 List 中当前正在访问或操作的对象。为**表格行**中的组件编辑表达式或添加事件，即可调用current变量：
+
+    <img src="../assets/shujubiaoge_202512301744_2.png" class="imgStyle" style="width:200px" />
+
+    **所有可绑定数据源的组件同理。**
+
+    在数据表格的属性中设置任意字段（如值字段）时，同样根据字段值进行循环遍历，但不显示其 current.item 前缀。
+
+    </div>
+
+    操作步骤：
+
+    1.  开启编辑表达式。
+
+        <img src="../assets/shujubiaoge_202512301744_3.png" class="imgStyle" style="width:300px" />
+
+    1.  点击“请选择表达式”进入编辑表达式页面，拖入变量或使用调用逻辑组件，可使用组件的可访问属性。
+
+        <img src="../assets/shujubiaoge_202512301744_4.png" class="imgStyle" style="" />
+
+    1.  添加表格列，为表格列设置“列字段“，或向表格列中拖拽放置需要展示组件的组件并为组件绑定数据源中的current.item或其属性，实现动态获取数据。
+
+        <img src="../assets/shujubiaoge_202512301744_5.png" class="imgStyle" style="" />
+
+        <img src="../assets/shujubiaoge_202512301744_6.png" class="imgStyle" style="" />
+
+- 数据类型：数据源返回的数据结构的类型，自动识别类型进行展示说明，为只读状态无法修改。
+- 唯一标识：绑定数据源后，依据该字段动态加载数据表格行的值。可在数据表格进行选择时用于指定选中值。
+- 分页：Boolean类型。是否展示分页。
+
+    <div class="highlight">
+
+    当“数据源”为前端数据，即数据不经过服务端逻辑处理，开启“分页”属性并配置“默认分页条数”即可实现分页功能。
+
+    当"数据源“需要调用服务端逻辑时，若开启“分页”，组件可以获取到分页的大小和当前的页数，将属性传递到服务端逻辑并在查询的数据中完成分页规则配置即可实现分页，参考操作步骤如下：
+
+    1.  为需要调用的查询数据的服务端逻辑添加两个Integer类型输入参数page和size。
+
+        <img src="../assets/shujubiaoge_202512301744_7.png" class="imgStyle" style="" />
+
+    1.  将数据查询包裹在分页组件内，页数为输入参数page、每页记录数为输入参数size。
+
+        <img src="../assets/shujubiaoge_202512301744_8.png" class="imgStyle" style="" />
+
+    1.  返回数据表格组件的数据源，将当前组件的可访问属性size和page作为输入参数传入服务端逻辑。
+
+        <img src="../assets/shujubiaoge_202512301744_9.png" class="imgStyle" style="" />
+
+    </div>
+
+
+
+- 每页条数选项：分页组件处是否展示每页显示数据条数的选择列表，需设置数组，如\[10,20,30,40,50]。在"分页"属性开启时有效。
+
+
+
+- 默认每页条数：每页的数据条数。默认10条。在"分页"属性开启时有效。
+- 当前页数：当前加载的表格页。默认1。在"分页"属性开启时有效。
+- 显示总条数：Boolean类型。分页组件处是否显示表格总数。默认关闭。在"分页"属性开启时有效。
+- 显示跳转输入：Boolean类型。分页组件处是否展示跳转到某一页的输入框。默认关闭。在"分页"属性开启时有效。
+
+    <img src="../assets/shujubiaoge_202512301744_10.png" class="imgStyle" style="" />
+
+- 初始化排序字段：绑定数据源后，支持选择数据表格数据源中的某一字段为排序依据。
+- 初始化排序顺序：选择“初始化排序字段”属性后，配置的默认排序规则，支持升序和降序。
+
+    <div class="highlight">
+
+    当“数据源”为前端数据，即数据不经过服务端逻辑处理，配置“初始化排序字段”和“初始化排序顺序”即可实现排序功能。
+
+    当"数据源“需要调用服务端逻辑时，若配置“初始化排序字段”和“初始化排序顺序”，组件可以获取到排序属性和排序字段，将属性传递到服务端逻辑并在查询的数据中完成排序规则配置即可实现排序，参考操作步骤如下：
+
+    1.  为需要调用的查询数据的服务端逻辑添加两个String类型输入参数sort和order。
+
+        <img src="../assets/shujubiaoge_202512301744_11.png" class="imgStyle" style="" />
+
+    1.  双击编辑数据查询，添加排序规则，排序属性为输入参数sort、顺序为输入参数order。
+
+        <img src="../assets/shujubiaoge_202512301744_12.png" class="imgStyle" style="" />
+
+    1.  返回数据表格组件的数据源，将当前组件的可访问属性sort和order作为输入参数传入服务端逻辑。
+
+        <img src="../assets/shujubiaoge_202512301744_13.png" class="imgStyle" style="" />
+
+    </div>
+
+
+
+- 父级值字段：当表格中的数据需要以树形方式展示时，绑定数据源后，依据该字段动态加载作为当前表格行上一层父级表格行的值，需同步配置“唯一标识”。”唯一标识“、”父级值字段“参考数据如”id“、"partentid"：
+
+    <img src="../assets/shujubiaoge_202512301744_14.png" class="imgStyle" style="" />
+
+#### 状态属性
+
+- 初始即加载：页面打开即加载数据。开启时，当数据源为逻辑，加载时自动调用对应逻辑。默认开启。
+- 单选行：Boolean类型。是否在点击当前行时选中整行。
+- 单选选中值：当表格开启了“单选行”属性时，选中某一行时的值。该取值由“唯一标识”属性决定。编辑表达式时通常直接绑定变量，如果开启“是否将组件输入赋值给变量“，会根据选择的表格行的“唯一标识”属性改变变量的值，也会根据变量的值展示当前选择的表格行。
+- 多选选中值：选择值后获取值列表数组`List<V>`。列表每一项 V 取值由“唯一标识”属性决定。用法与“单选选中值”属性类似。常见用法如：与表格组件中列类型设置为 “多选列”的表格列配合使用，实现表格行的多选值获取。
+
+#### 样式属性
+
+- 表格尺寸：数据表格的整体大小，包括小、中、大。
+- 是否显示表格边框：Boolean类型。表格列是否带有纵向边框。
+- 是否显示斑马纹：Boolean类型。表格行是否按斑马线条纹显示。默认关闭。
+
+    <img src="../assets/shujubiaoge_202512301744_15.png" class="imgStyle" style="" />
+
+- 是否显示表头：Boolean类型。是否显示表格标题。
+
+    <img src="../assets/shujubiaoge_202512301744_16.png" class="imgStyle" style="" />
+
+- 表格布局方式：表格列宽设置方式。
+  - auto：列的宽度根据该列的内容的宽度自动调整。
+  - fixed：列的宽度固定为指定数值。
+- 是否表头吸顶：Boolean类型。表格头是否固定在头部，不随表格滚动。默认关闭。
+- 表头吸顶偏移量：Integer类型。表头与页面顶部之间的预留距离（即偏移高度），单位为px。
+
+#### 高级属性
+
+- 列配置：Boolean类型。开启功能时，表格头部右侧出现“展示列”选项，支持应用制品用户自由配置表格中表格列的显隐，可配置列根据表格列的“列字段”属性自动生成、可配置列文本根据表格列的“列标题”属性自动生成。
+
+    <div class="highlight">
+
+    **操作步骤**
+
+    1.  开启表格列的“列配置”属性。
+
+        <img src="../assets/shujubiaoge_202512301744_17.png" class="imgStyle" style="" />
+
+    1.  依次设置每一个表格列的“列字段”并填写“列标题”。
+
+        <img src="../assets/shujubiaoge_202512301744_18.png" class="imgStyle" style="" />
+
+    **效果演示**
+
+    <img src="../assets/shujubiaoge_202512301744_19.png" class="imgStyle" style="" />
+
+    </div>
+
+
+
+- 合并行或列的计算方法：合并单元格的规则。
+
+    <div class="highlight">
+
+    “合并行或列的计算方式”的表达式中默认包含匿名数据结构，匿名数据结构中的属性如下：
+
+    - rowspan: Integer 类型。单元格跨越多行的行数，例如rowspan为2表示单元格向下跨越2行。
+    - colspan: Integer 类型。单元格跨越多列的列数，例如colspan为3表示单元格向右跨越3行。
+    - item: any 类型。单元格所在行。
+    - column: any 类型。单元格所在列。
+    - rowIndex: Integer 类型。单元格所在行的索引，例如rowIndex为0表示第1行。
+    - columnIndex: Integer 类型。单元格所在列的索引，例如columnIndex为2表示第3列。
+
+    </div>
+
+
+
+### 表格列
+
+<img src="../assets/shujubiaoge_202512301744_20.png" class="imgStyle" style="" />
+
+数据表格支持手动添加表格列，表格列内容根据数据表格的数据源动态渲染。
+
+#### 数据属性
+
+- 列类型：可设置普通列、多选列、展开列、序号列或编辑列。
+
+    - 普通列：包含插槽，支持根据表格列的“列字段”属性或插槽中拖拽的组件及其内容，来实现表格列内容的动态加载。
+
+        <img src="../assets/shujubiaoge_202512301744_21.png" class="imgStyle" style="" />
+
+    - 多选列：表格列展示为多选框，支持对数据表格行进行多选。多选后的表格行可将数据表格的“值字段”属性记录为数据表格的“选中值”。
+
+        <img src="../assets/shujubiaoge_202512301744_22.png" class="imgStyle" style="" />
+
+    - 展开列：表格列内容收缩展示，支持点击标识后在当前表格行下方展开一行并展示表格列内容，
+
+        <img src="../assets/shujubiaoge_202512301744_23.png" class="imgStyle" style="" />
+
+    - 序号列：表格列展示排序序号，表格列内容处的插槽内容为空时生效。设为序号列时，支持开启“换页继续编号”属性，实现继续上一页的列序号进行编号。
+
+        <img src="../assets/shujubiaoge_202512301744_24.png" class="imgStyle" style="" />
+
+    - 编辑列：表格列展示编辑图标，点击编辑图标后进入可编辑状态。与表格列的“列字段”属性关联，列字段不能为空。
+
+        > 实现编辑列的编辑功能，需搭配输入类型组件与表格列事件「编辑列变化时」使用，具体用法可参考文档下文示例：[编辑列](#编辑列)
+
+        <img src="../assets/shujubiaoge_202512301744_25.png" class="imgStyle" style="" />
+
+- 列标题：表格列头部显示的标题文本，表格列标题处的插槽内容为空时生效；同时也在数据表格开启“列配置”属性时作为可配置列的选项文本。
+
+    <img src="../assets/shujubiaoge_202512301744_26.png" class="imgStyle" style="" />
+
+- 列字段：绑定数据源后，当前列对应的数据的字段名。支持在表格列内容处的插槽内容为空时依据该字段动态加载表格列的文本。必填。
+- 排序：设置当前表格列是否排序。
+
+#### 样式属性
+
+- 固定列：Boolean类型。开启后，当表格横向滚动条滚动时，该列会固定不会跟随滚动条滚动。常用于固定首列或尾列。默认关闭。
+- 是否允许调整列宽：Boolean类型。是否允许通过拖拽表格列边框修改表格列的宽度，开启表格的“是否显示表格边框”属性后生效。
+
+### 表格列动态
+
+通过设置表格列的数据源，根据数据源的数量动态生成表格列数。
+
+<img src="../assets/shujubiaoge_202512301744_27.png" class="imgStyle" style="" />
+
+#### 数据属性
+
+- 动态表格列的数据源：动态表格列展示的数据。数据源可以绑定`List<T>`类型变量或输出参数为数组或包含`List<T>`的匿名数据结构的逻辑。
+
+    <div class="highlight">
+
+    当添加动态表格列时，数据表格的数据源的数据类型通常设置为`List<固定列，Map<key,value>>`，其中key需要与动态列的数据源相对应，例如动态列的数据源为`List<date:Date>`，数据表格的数据源为`List<name:String,Map<date:Date,score:Integer>>`。
+
+    动态实现数据表格列的具体方法请参考[如何设置表格动态列-1](../../../../80.常见场景案例/40.组件场景/20.表格场景/086.如何设置表格动态列-1.md)，[如何设置表格动态列-2](../../../../80.常见场景案例/40.组件场景/20.表格场景/086.如何设置表格动态列-2.md)。
+
+    </div>
+
+- 数据类型：数据源返回的数据结构的类型，自动识别类型进行展示说明，为只读状态无法修改。
+- 列字段：绑定数据源后，当前列对应的数据的字段名。支持在表格列内容处的插槽内容为空时依据该字段动态加载表格列的文本。必填。
+- 排序：设置当前表格列是否排序。
+
+#### 样式属性
+
+- 固定列：Boolean类型。开启后，当表格横向滚动条滚动时，该列会固定不会跟随滚动条滚动。常用于固定首列或尾列。默认关闭。
+- 是否允许调整列宽：Boolean类型。是否允许通过拖拽表格列边框修改表格列的宽度，开启表格的“是否显示表格边框”属性后生效。
+
+## 事件
+
+### 数据表格
+
+| **事件名** | **描述**                                     |
+| :-------- | :------------------------------------------- |
+| 单元格点击时    | 点击任何表格列单元格时触发该事件中的逻辑                         |
+| 选中行变化时    | 在数据表格开启“表格可选择”的前提下，选择表格行改变时触发该事件中的逻辑         |
+| 分页发生变化时触发 | 切换分页时触发该事件中的逻辑                               |
+| 行点击时触发    | 单击表格行时触发该事件中的逻辑                              |
+| 当前选中行变化时  | 当表格的“当前高亮/聚焦”的那一行发生变化时触发该事件中的逻辑              |
+| 行双击时触发    | 双击表格行时触发该事件中的逻辑                              |
+| 表格内容滚动时触发 | 在表格默认每页数据的总高度超出“表格最大高度”的前提下，滚动表格内容时触发该事件中的逻辑 |
+| 数据加载成功时触发 | 当表格的数据（包括首次加载或异步请求返回后）成功加载并完成渲染时触发该事件中的逻辑    |
+
+### 表格列
+
+| **事件名** | **描述**                                     |
+| :-------- | :------------------------------------------- |
+| 编辑列变化时    | 当可编辑列里某一行/单元格发生编辑变化时触发该事件中的逻辑                         |
+
+**编辑列变化时**
+
+- 事件描述：当可编辑列里某一行/单元格发生编辑变化时触发该事件中的逻辑
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+    <img src="../assets/shujubiaoge_202512301744_28.png" class="imgStyle" style="width:200px" />
+  - row：Object类型，当前编辑的行数据。
+  - index：Integer类型，行的索引。
+  - cellIndex：Integer类型，单元格的索引。
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用数据表格组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/shujubiaoge_202512301744_29.png" class="imgStyle" style="width:300px" />
+
+**数据表格**
+
+- data（数据）：`List<T>`类型，数据表格内容的数据集合，来源于数据表格的数据源。支持获取。
+- pageSize（分页大小）：Integer类型，数据表格当前每页条数。支持获取。
+- currentPage（当前页数）：Integer类型，数据表格当前页数。支持获取。
+- order（排序方式）：String类型，排序规则，desc或asc。支持获取。
+- sort（排序属性）：String类型，排序的字段名。支持获取。
+- \_if（显示条件）：Boolean类型，数据表格是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+**表格列**
+
+- \_if（显示条件）：Boolean类型，表格列是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 组件逻辑
+
+页面添加数据表格组件后，支持调用数据表格的内置逻辑，内置逻辑有：
+
+| **逻辑名** | **描述**     |
+| :------ | :----------- |
+| reload  | 清除缓存，重新加载数据。 |
+
+<img src="../assets/shujubiaoge_202512301744_30.png" class="imgStyle" style="width:300px" />
+
+### reload
+
+- 逻辑概述：清除缓存，重新加载数据。适用于数据表格的数据源使用调用逻辑或内置函数的情况。
+- 其他说明：
+
+    - 当数据表格的数据源使用调用逻辑并添加了监听变量，被监听的变量改变时将自动触发数据表格的reload。详细说明请参考[组件通用属性说明](../../17.组件通用属性说明.md)-监听变量。
+    - 当数据表格的数据源为调用逻辑或内置函数时，在新增、修改、删除数据等操作后，一般调用reload逻辑重新加载表格数据，用户修改信息后会即时呈现数据；当数据表格的数据源为变量时，变量支持在事件发生后动态更新，无需调用逻辑重新加载。
+
+## **插槽**
+
+数据表格组件中包含插槽，支持拖拽放置其他组件：
+
+- 表格列头部包含插槽。常见用法如：指示当前表格列的标题信息，例如拖拽放置文本。
+
+    <img src="../assets/shujubiaoge_202512301744_31.png" class="imgStyle" style="" />
+
+- 表格列包含插槽。插槽中的组件支持根据数据表格的数据源来配置信息并动态加载。常见用法如：指示当前表格列的行内容，例如拖拽放置文本。
+
+    <img src="../assets/shujubiaoge_202512301744_32.png" class="imgStyle" style="" />
+
+    <div class="highlight">
+
+    当表格列的插槽中不包含任何组件（包括布局组件）时，制品应用中显示的表格列会根据列字段动态加载文本，其效果等同于拖入文本组件并为文本组件绑定current变量下对应列字段的值。
+
+    <img src="../assets/shujubiaoge_202512301744_33.png" class="imgStyle" style="" />
+
+    </div>
+
+
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+- border-color：边框颜色。
+- border：边框。
+- text-color：文本颜色。
+- header-text-color：表头文本颜色。
+- row-hover-bg-color：行悬浮背景颜色。
+- header-bg-color：表头背景颜色。
+- fixed-box-shadow：固定框阴影。
+- bg-color：表背景颜色。
+- tr-bg-color：行背景颜色。
+- expanded-cell-bg-color：展开单元格背景颜色。
+- fixed-left-column：固定左侧列阴影。
+- fixed-right-column：固定右侧列阴影。
+- index：索引。
+
+组件支持在**样式**->**主题样式**中调整当前单个组件的主题样式；也支持在**自定义主题样式**->**组件主题配置**中调整当前类型组件在应用中的所有样式，并支持直接预览效果。
+
+> 推荐前往组件主题配置中查看各主题样式的效果，相关文档请参考[自定义主题样式](../../../60.可视化开发界面/70.更多设置/30.自定义主题样式.md)。
+
+<img src="../assets/shujubiaoge_202512301744_34.png" class="imgStyle" style="" />
+
+## 使用说明
+
+可直接拖拽实体生成数据表格。
+
+拖拽实体后可选择列表（全）或列表（简），列表（全）同时包含创建、筛选、删除数据的功能，列表（简）仅生成数据表格用于展示实体数据以及删除数据功能。
+
+<img src="../assets/shujubiaoge_202512301744_35.png" class="imgStyle" style="" />
+
+应用支持自动生成查询实体全部数据的服务端逻辑并绑定为数据表格的数据源。展示的表格列根据实体的“显示在表格”配置、自动配置值字段，若不符合要求，可根据具体需求修改。
+
+<img src="../assets/shujubiaoge_202512301744_36.png" class="imgStyle" style="" />
+
+<img src="../assets/shujubiaoge_202512301744_37.png" class="imgStyle" style="" />
+
+
+## 示例
+
+### 场景介绍
+
+在数据表格中实现批量删除功能；对字段进行信息的补充；对字段进行信息的修改；固定表格操作列。
+
+- 多选列：对表格内的数据进行批量删除。
+
+  1.  设置多选列属性。
+  2.  获取数据对应的id数组。
+  3.  调用删除逻辑。
+
+- 展开列：对表格内某个字段进行信息扩充。
+- 固定列：对表格操作列进行固定，左右拖动数据表格时被固定列不移动。
+- 编辑列：对表格内的单个数据进行修改。
+
+  1.  设置编辑列属性，指定列字段。
+  2.  对输入组件的预览模式编辑表达式。
+  3.  编辑列变化时调用更新逻辑。
+
+### 操作步骤
+
+#### 多选列
+
+1.  对数据表格某一列：例如首列属性设置为多选列。
+
+    <img src="../assets/shujubiaoge_202512301744_38.png" class="imgStyle" style="" />
+
+1.  添加一个类型为`List<T>`的变量，例如listTabled，将变量绑定到数据表格多选选中值属性。
+
+    > 数据表格“唯一标识”属性所写字段的类型即为多选选中值的字段类型，此时字段为 id 为 Integer 类型，故接收变量为 `List<Integer>` 类型。
+
+    <img src="../assets/shujubiaoge_202512301744_39.png" class="imgStyle" style="" />
+
+1.  添加按钮组件，文本修改为“批量删除”，并为按钮添加点击事件，当listTabledId非空时，调用对应实体的批量删除逻辑。完成后使用内置逻辑Clear清空listTabledId并调用重新加载数据表格逻辑。
+
+    <img src="../assets/shujubiaoge_202512301744_40.png" class="imgStyle" style="" />
+
+#### 展开列
+
+1.  选择某一表格列作为触发展开的列，在属性中设置展开列。
+
+    <img src="../assets/shujubiaoge_202512301744_41.png" class="imgStyle" style="" />
+
+1.  然后可将组件拖入该列单元格插槽内，例如文本组件，设置文本展示信息，发布即可实现信息展开折叠。
+
+    <img src="../assets/shujubiaoge_202512301744_42.png" class="imgStyle" style="" />
+
+    <img src="../assets/shujubiaoge_202512301744_43.png" class="imgStyle" style="" />
+
+#### 固定列
+
+1.  选择想要固定的列：例如操作列，在属性中设置中打开固定列属性以及设置固定列位置。
+
+    <img src="../assets/shujubiaoge_202512301744_44.png" class="imgStyle" style="" />
+
+1.  表格列较少时，通过设置表格列宽度，使所有列宽度之和大于表格宽度时即可实现表格拖拽固定效果。
+
+    <img src="../assets/shujubiaoge_202512301744_45.png" class="imgStyle" style="" />
+
+#### 编辑列
+
+1.  选择需编辑的列，指定列字段为目标编辑字段，列类型选择「编辑列」，完成后应用将自动生成编辑图标。
+
+    <img src="../assets/shujubiaoge_202512301744_46.png" class="imgStyle" style="" />
+
+1.  根据字段类型拖入对应输入组件，例如商品数量为 String 类型时，拖入输入框组件，并将输入框组件的「输入值」属性绑定至current下对应编辑字段；同时对组件的预览模式编辑表达式，设置为变量`current.isPreview`。
+
+    > isPreview属性用来区分当前处于 “预览模式”还是“编辑模式”，取值为true时是预览模式，false时是编辑模式。点击编辑图标会打开编辑模式，再次点击编辑图标则会切换为预览模式。
+
+    <img src="../assets/shujubiaoge_202512301744_47.png" class="imgStyle" style="" />
+
+    <img src="../assets/shujubiaoge_202512301744_48.png" class="imgStyle" style="" />
+
+1.  选中该编辑列，添加「编辑列变化时」事件。
+
+    <img src="../assets/shujubiaoge_202512301744_49.png" class="imgStyle" style="" />
+
+1.  在事件中使用 update 逻辑更新实体数据，body选择事件下的输入参数`event.row`下的对象，即当前编辑的行数据。
+
+    <img src="../assets/shujubiaoge_202512301744_50.png" class="imgStyle" style="" />
+
+### 效果演示
+
+<img src="../assets/shujubiaoge_202512301744_51.gif" class="imgStyle" style="" />
+
+<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年12月30日</span>
+</div>
+
+<style>
+.tag-blue {
+    display: inline-block;
+    padding: 0.5px 10px;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    background-color: #dbeafe; /* 浅蓝色背景 */
+    color: #2563eb; /* 深蓝色文字 */
+}
+.tag-yellow {
+    display: inline-block;
+    padding: 0.5px 10px;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    background-color: #fef3c7; /* 浅黄色背景 */
+    color: #d97706; /* 深黄色文字 */
+}
+
+</style>
+
+<style>
+ .highlight {
+    background-color: #eaf6ff;
+    border-color: #679CF8;
+    border-left-width: 0.2rem;
+    border-left-style: solid;
+    padding: 1rem 1rem 1rem 1rem;
+    margin: 1rem 0px;
+}
+</style>

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/26.PC/347/253/257Vue3/347/273/204/344/273/266/350/257/264/346/230/216/50./350/241/250/346/240/274/20./346/227/245/345/216/206.md

@@ -0,0 +1,97 @@
+# 日历
+
+<span class="tag-blue">Vue3</span> <span class="tag-yellow">PC</span>
+
+用于展示日期、月份和年份的信息。
+
+<img src="../assets/rili_202506121112_1.png" class="imgStyle" style="" />
+
+<div class="highlight">
+
+在本章节，你将学习：
+
+1. 日历的各类属性、事件、可访问属性等基础信息。
+2. 如何使用日历的各类属性，具体实现效果包括但不限于
+
+   * 使用日历的“选中日期”属性，以设置指定日历默认显示的年月日；
+   * 使用日历的“时间范围”属性，以设置日历显示的日期范围。
+
+</div>
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 主要属性
+
+- 选中日期：可通过设置值来指定日历默认显示的年月日。若未设置值，则显示当前月份。支持Date、String类型，例如2024.01.01、2024/01/01。默认开启编辑表达式功能，编辑表达式时通常直接绑定变量，如果开启“是否将组件输入赋值给变量“，会根据选择的日期的值改变变量的值，也会根据变量的值展示当前日期。
+
+    <img src="../assets/kapian_20260105152654_1.png" class="imgStyle" style="" />
+
+- 时间范围：用于设置日历显示的日期范围，需包括开始时间与结束时间。开始日期必须是周起始日，结束日期必须是周结束日，且时间跨度不能超过两个月，可直接输入字面量，例如\["2025-04-06","2025-04-12"]。若开始日期和结束日期不符合要求，则设置不生效。
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用日历组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/rili_202506121112_3.png" class="imgStyle" style="width:300px" />
+
+- \_if（显示条件）：Boolean类型，日历是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+- border：日历边框样式
+- header-border-bottom：日历头部底部边框样式
+- selected-bg-color：选中日期的背景颜色
+- cell-width：日历单元格宽度
+
+组件支持在**样式->主题样式**中调整当前单个组件的主题样式；也支持在自定义**主题样式->组件主题配置**中调整当前类型组件在应用中的所有样式，并支持直接预览效果。
+
+> 推荐前往组件主题配置中查看各主题样式的效果，相关文档请参考[自定义主题样式](../../../60.可视化开发界面/70.更多设置/30.自定义主题样式.md)。
+
+<img src="../assets/rili_202506121112_4.png" class="imgStyle" style="" />
+
+<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年06月12日</span>
+</div>
+<style>
+.tag-blue {
+    display: inline-block;
+    padding: 0.5px 10px;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    background-color: #dbeafe; /* 浅蓝色背景 */
+    color: #2563eb; /* 深蓝色文字 */
+}
+.tag-yellow {
+    display: inline-block;
+    padding: 0.5px 10px;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    background-color: #fef3c7; /* 浅黄色背景 */
+    color: #d97706; /* 深黄色文字 */
+}
+
+</style>
+
+<style>
+ .highlight {
+    background-color: #eaf6ff;
+    border-color: #679CF8;
+    border-left-width: 0.2rem;
+    border-left-style: solid;
+    padding: 1rem 1rem 1rem 1rem;
+    margin: 1rem 0px;
+}
+</style>