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 是一个数组，每个元素表示一列的配置信息。
• <template #op="slotProps">：定义一个名为 op 的插槽，用于渲染每行的操作列。
• <a class="t-button-link" @click="handleClickConn(slotProps)">连接</a>：渲染一个连接按钮，并绑定点击事件。
• <a class="t-button-link" @click="handleClickModify(slotProps)">编辑</a>：渲染一个编辑按钮，并绑定点击事件。
• <a class="t-button-link" @click="handleClickDelete(slotProps)">删除</a>：渲染一个删除按钮，并绑定点击事件。

总之，t-table 是 T-Design 框架中用于渲染表格的组件，提供了丰富的配置选项和事件回调函数，可以满足不同场景下的需求。

Table组件中，columns的属性

在 Tdesign 的 table 组件中，columns 数组用于定义表格的列。每个列都是一个对象，包含以下属性：

• colKey：列的唯一标识符，用于指定该列对应的数据字段。
• title：列的标题，显示在表头中。
• type：列的类型。可以是 'default'（默认值）、'selection'（多选框列）或 'index'（序号列）。
• width：列的宽度，可以是数字或字符串。如果是数字，表示列的宽度（单位为像素）；如果是字符串，表示列的宽度（例如 '10%' 表示占据父元素宽度的 10%）。
• align：列的对齐方式，可以是 'left'、'center' 或 'right'。
• ellipsis：是否启用文本溢出省略号。如果为 true，则当单元格内容过长时，会显示省略号。
• fixed：列的固定位置，可以是 'left'、'right' 或 true。如果是 'left'，则表示该列固定在表格左侧；如果是 'right'，则表示该列固定在表格右侧；如果是 true，则表示该列固定在左侧和右侧。
• render：自定义单元格的渲染函数。该函数接受两个参数：h 和 params。h 是 Vue 的 createElement 函数，用于创建虚拟 DOM；params 是一个对象，包含以下属性：row 表示当前行的数据，column 表示当前列的配置对象，index 表示当前行的索引。