Tdesign 常用知识

Mock数据中的常见随机数：

mock 数据中，@ 开头的是 Mock.js 的语法。Mock.js 是一个用于生成随机数据的库，它提供了一些特殊的语法，可以方便地生成各种类型的随机数据。

在这个 mock 数据中，使用了以下语法：

• @natural(min, max)：生成一个指定范围内的自然数。
• @city()：随机生成一个城市名。
• @date(format)：生成一个指定格式的日期字符串。
• @cname()：随机生成一个中文名字。

这些语法可以在 Mock.js 的文档中找到详细的说明。在实际使用中，你可以根据需要选择合适的语法来生成随机数据。

t-table 组件

使用 T-Design 框架中的 t-table 组件来渲染一个表格，具体作用如下：

• :data="data"：指定表格的数据，data 是一个数组，每个元素表示一行的数据。
• :columns="columns"：指定表格的列，columns 是一个数组，每个元素表示一列的配置信息。
• rowKey="id"：指定表格行的唯一标识，通常是数据中的一个字段。
• :verticalAlign="verticalAlign"：指定表格单元格的垂直对齐方式。
• :hover="hover"：指定是否在鼠标悬停时高亮显示行。
• :pagination="pagination"：指定是否启用分页功能。
• :selected-row-keys="selectedRowKeys"：指定选中的行，selectedRowKeys 是一个数组，每个元素表示选中行的唯一标识。
• @page-change="rehandlePageChange"：当分页状态发生变化时触发的事件，rehandlePageChange 是事件处理函数。
• @change="rehandleChange"：当表格的选中状态发生变化时触发的事件，rehandleChange 是事件处理函数。
• @select-change="rehandleSelectChange"：当选中的行发生变化时触发的事件，rehandleSelectChange 是事件处理函数。
• :loading="dataLoading"：指定是否显示加载状态。
• :headerAffixedTop="true"：指定表头是否固定在顶部。
• :headerAffixProps="{ offsetTop, container: getContainer }"：指定表头固定时的一些配置参数。
• :displayColumns.sync="displayColumns"：指定表格显示的列，displayColumns 是一个数组，每个元素表示一列的配置信息。
• :columnControllerVisible.sync="columnControllerVisible"：指定列控制器是否可见。
• :columnController="{ fields: this.controlColum, dialogProps: { preventScrollThrough: true }, hideTriggerButton: true }"：指定列控制器的一些配置参数，fields 是一个数组，每个元素表示一列的配置信息。