一．Button（按钮） - 用于创建不同类型的按钮。
按钮有六种类型（type），'primary（蓝）'、'success（绿）'、'warning（黄）'、'danger（红）'、'info（灰）'，以及不加type属性的默认按钮。
1. 颜色
上述颜色不合胃口，可以使用深度选择器（：deep（））选中按钮类名后，通过background-color自定义更改。
实操：①利用取反达到按钮“开关”效果（使用三元运算符更加简洁）
结构：
<el-button :type="isToggled ? 'open' : 'close'" @click="toggleButton">
{{ 按钮文本 }}
</el-button>
脚本：
// 切换按钮状态的方法
const isToggled = ref(false);
const toggleButton = () => {
isToggled.value = !isToggled.value;
};
2. 大小
Ui给了四种，'large'、'medium'、'small'、'mini'，默认为medium。能满足自己玩，但满足不了界面。
一般用：deep（）选中类名后，使用padding扩充按钮大小，再使用font-size设置其中文本大小，就是一个全新尺寸的按钮。
3. 常用属性
①disabled：禁用属性，设置后不可点。
②Circle：圆形按钮，变圆，配合icon可更加美观
③loading ：表示按钮是否处于加载状态，需要进行数据提交或长时间运行的后台操作时，使用。
例：<el-button type="primary" :loading="loading" @click="handleClick"></el-button>
const loading = ref(false);
function handleClick() {
loading.value = true;
setTimeout(() => {
// 操作完成，关闭加载状态
loading.value = false;
}, 3000);
}
④loading-icon：自定义加载中状态图标组件，想要在加载时，显示什么图标就用这个。
例：<el-button type="primary" :loading="loading" :loading-icon="loadingIcon">
加载按钮
</el-button>
const loading = ref(false);
const loadingIcon = Loading;
⑤icon：图标组件
⑥native-type：原生 type 属性。这个属性在处理表单提交、重置或普通按钮行为时非常有用，因为它可以确保按钮的行为与原生 HTML 表单中的按钮行为保持一致。
当你在表单中使用 el-button 并且希望该按钮触发表单提交时，可以将 native-type 设置为 submit。这样，当用户点击按钮，表单会被提交，就像使用原生 HTML 一样。
<el-button native-type="submit">提交</el-button>
或：重置
<el-button native-type="reset">重置</el-button>
⑦auto-insert-space：自动在两个中文字符之间插入空格
例：<el-button type="primary" auto-insert-space>确 定</el-button>
⑧tag：自定义元素标签。默认情况下，el-button 渲染为一个 button 元素，但使用 tag 属性，你可以将其更改为其他 HTML 元素，例如 div、a、router-link 或 nuxt-link 等。
这个属性在以下场景中非常有用：
链接按钮：如果你想让按钮表现得像一个链接，可以将其更改为 a 标签，并设置 href 属性。
路由链接：在 Vue 路由器中，你可以使用 router-link 或 nuxt-link 作为标签，以便按钮可以进行页面导航。
自定义布局：有时你可能需要将按钮放在非按钮元素中，比如 div，以适应特定的布局需求。
示例：
<el-button tag="a" href="https://example.com" target="_blank">链接</el-button>
<el-button tag="router-link" to="/home">首页</el-button>
<el-button tag="div">我是一个div</el-button>
⑨default：自定义默认内容。
不止el-table，还有很多其他组件，都有这个slot插槽功能。它允许将内容注入到组件的模板中。default 是 Vue 中的一种特殊类型的插槽，称为默认插槽，它用于在组件中插入不具名的内容。
在 Element Plus 中使用默认插槽通常涉及将 template 标签与 #default 属性一起使用。
例如：
<el-table-column label="操作">
<template #default="scope">
<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
在 el-pagination 分页组件中，也可以使用默认插槽来自定义分页控件的某些部分。
<el-pagination
:current-page="currentPage"
:page-size="pageSize"
:total="total"
layout="prev, pager, next, jumper"
@current-change="handleCurrentChange"
@size-change="handleSizeChange">
<template #default>
共 {{ total }} 条记录
</template>
</el-pagination>
在 Element Plus 的 el-button 组件中，default 插槽允许自定义按钮内部的内容。这可以是文本、图标或任何其他 Vue 组件。使用 default 插槽，可以完全控制按钮的显示内容，这在需要对按钮进行高度自定义时非常有用。
<el-button>
<template #default>
<!-- 这里可以放置任何自定义内容 -->
<span>自定义按钮文本</span>
<i class="el-icon-edit"></i>
</template>
</el-button>
default 插槽提供了极高的灵活性，可以在按钮内部放置几乎任何类型的 HTML 或 Vue 组件。这使得 el-button 组件可以适应各种不同的设计需求，例如：
a.在按钮中显示图标和文本。
b.创建带有自定义样式的按钮。
c.嵌套其他 Vue 组件，如 el-icon 或 el-dropdown。
主要是b和c，a使用的话会变得更麻烦。
在其他组件上，作用大致相同。
