标签
a-space标签
a-space组件，用于在内部放置一些元素，并根据需要添加间距。
Ant Design:是一个基于 React 的企业级 UI 组件库，提供了丰富的可复用的UI组件和样式。
a-button标签
<a-button type="primary" @click="handleAdd">新增</a-button>
这是一个 Ant Design 的按钮组件 a-button，type="primary" 表示这是一个主要按钮，@click="handleAdd" 是一个事件监听器，按钮名为“新增”，当按钮被点击时，会调用名为 handleAdd 的方法。
拓展：
<a-button type="default">默认按钮</a-button>
<a-button type="dashed">虚线按钮</a-button>
<a-button type="text">文本按钮</a-button>
<a-button type="link">链接按钮</a-button>
<a-button type="ghost">幽灵按钮</a-button>
<a-button type="danger">危险按钮</a-button>
primary：主要按钮，用于标识重要的操作或主要行动。default：默认按钮，常用于一般的操作或次要行动。dashed：虚线按钮，用于在一组按钮中表示辅助操作。text：文本按钮，没有背景色和边框，用于在需要更强调文本内容的场景。link：链接按钮，类似于普通的超链接样式，适用于跳转或导航功能。ghost：幽灵按钮，透明背景、边框和高亮色，用于与深色背景搭配或特殊的视觉效果需求。
a-input-search标签
<a-input-search addon-before="名称" enter-button @search="onSearch" @change="onSearchChange" />
a-input-search这是一个Ant Design的搜索输入框组件，addon-before="名称" 表示在输入框前面会显示一个文本标签 “名称”，enter-button 表示输入框后面会显示一个搜索按钮，@search="onSearch" 是一个事件监听器，当点击搜索按钮或按下回车键时，会调用名为 onSearch 的方法，@change="onSearchChange" 是一个事件监听器，当输入框内容发生变化时，会调用名为 onSearchChange 的方法。
a-table标签
<a-table>标签这是一个Ant Design Vue的表格组件，用于展示数据列表
<a-table
size="middle" //设置表格的尺寸为 “middle”。
rowKey="id" //设置每行数据的唯一 key 值，这里设置为 “id”
:loading="data.loading" //绑定 data.loading 属性到表格的 loading 属性，用于实现数据加载时显示加载状态。
:columns="columns" //绑定 columns 变量到表格的 columns 属性，用于定义表格的列配置
:data-source="data.dataList" //绑定 data.dataList 属性到表格的 data-source 属性，用于指定表格的数据源。
:scroll="{ x: 'max-content' }" //设置表格的水平滚动，宽度自动根据内容撑开。
:row-selection="rowSelection" //绑定 rowSelection 变量到表格的 row-selection 属性，用于定义行选择的配置。
:pagination="{ //绑定一个对象到表格的 pagination 属性，用于配置分页器。
size: 'default',
current: data.page, //设置当前页码为 data.page 变量的值。
pageSize: data.pageSize, 设置每页显示的数据条数为 data.pageSize 变量的值。
onChange: (current) => (data.page = current), //定义页码改变时的回调函数，将回调函数里的 current 参数赋值给 data.page 变量。
showSizeChanger: false, //禁用分页器中的每页显示条数切换器。
showTotal: (total) => `共${total}条数据`, //设置分页器中的总数据条数提示，根据 total 参数动态显示。
}"
>
<template #bodyCell="{ text, record, index, column }">
<template v-if="column.key === 'operation'">
<span>
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical" />
<a-popconfirm title="确定删除?" ok-text="是" cancel-text="否" @confirm="confirmDelete(record)">
<a href="#">删除</a>
</a-popconfirm>
</span>
</template>
</template>
</a-table>
a-popconfirm标签
<a-popconfirm title="确定删除?" ok-text="是" cancel-text="否" @confirm="confirmDelete(record)">
<a-popconfirm>是一个自定义的组件，用于创建一个弹出确认对话框。title="确定删除?"是<a-popconfirm>组件的属性之一，用于设置对话框的标题文本为 “确定删除?”。ok-text="是"是<a-popconfirm>组件的属性之一，用于设置确认按钮的文本为 “是”。用户点击确认按钮时，将执行@confirm事件绑定的处理函数。cancel-text="否"是<a-popconfirm>组件的属性之一，用于设置取消按钮的文本为 “否”。用户点击取消按钮时，将关闭对话框，不执行删除操作。
@confirm 事件来绑定确认按钮的点击事件
@cancel 事件来绑定取消按钮的点击事件
.then((res))
回调函数是一种特殊的函数，它作为参数传递给另一个函数，并在某个特定事件发生或条件满足时被调用。
监听按钮
例如：
<button class="btn btn-warning" onclick="showScoreInput()">录入界面</button>
点击按钮，调用"showScoreInput()"函数
在 HTML 中，可以使用以下事件监听器来捕捉用户操作或其他事件：
onclick：鼠标点击某个元素时触发。ondblclick：鼠标双击某个元素时触发。onmouseover：鼠标悬停在某个元素上时触发。onmouseout：鼠标移出某个元素时触发。onkeydown：用户按下键盘上的键时触发。onkeyup：用户释放键盘上的键时触发。onkeypress：当键盘上的按键被按下并释放时触发。onload：当页面或图像加载完成时触发。onunload：当页面或图像被卸载时触发。onsubmit：当表单被提交时触发。onreset：当表单被重置时触发。oninput：当用户输入数据到输入字段时触发。onchange：当用户改变某个元素的值时触发。onfocus：当元素获得焦点时触发。onblur：当元素失去焦点时触发。
代码块解析：
a-input-search这是一个Ant Design的搜索输入框组件，addon-before="名称" 表示在输入框前面会显示一个文本标签 “名称”，enter-button 表示输入框后面会显示一个搜索按钮，@search="onSearch" 是一个事件监听器，当点击搜索按钮或按下回车键时，会调用名为 onSearch 的方法，@change="onSearchChange" 是一个事件监听器，当输入框内容发生变化时，会调用名为 onSearchChange 的方法。
<a-input-search addon-before="名称" enter-button @search="onSearch" @change="onSearchChange" />
const onSearchChange = (e: Event) => {
data.keyword = e?.target?.value; =======此行
console.log(data.keyword);
};
- 这行代码将搜索框的值赋给了一个名为
data.keyword的变量。 e是事件对象，.target表示触发事件的元素，.value表示元素的值。?.是可选链操作符，用于在属性链中进行安全的空值检查。
const handleBatchDelete = () => { //定义函数
console.log(data.selectedRowKeys);
if (data.selectedRowKeys.length <= 0) { //如果选中行的数量小于等于0，
console.log('hello'); // 打印输出 'hello'
message.warn('请勾选删除项'); // 显示一个警告消息，提示用户勾选删除项
return; // 终止函数的执行
}
deleteApi({ ids: data.selectedRowKeys.join(',') })
.then((res) => { //在删除API(deleteApi)调用成功后，执行一个回调函数
message.success('删除成功'); //显示一个删除成功的提示消息
data.selectedRowKeys = [];
getDataList();
})
.catch((err) => { //在删除API调用失败后，执行一个回调函数,err表示错误对象。
message.error(err.msg || '操作失败');
//显示一个错误提示消息。如果err对象包含msg属性，则将该属性值作为消息内容显示，否则显示默认内容"操作失败"。
});
};
第一行：deleteApi的函数，并传入了一个对象作为参数，对象中有一个属性ids。这个属性的值是通过data.selectedRowKeys.join(',')表达式计算得出的.
data.selectedRowKeys：这是一个数组，data.selectedRowKeys.join(',')：这是对data.selectedRowKeys数组进行了字符串连接操作，使用逗号作为分隔符。
如果data.selectedRowKeys的值为[1, 2, 3]，那么该表达式的结果就是字符串"1,2,3"