必答问答（PPT 第 36 页）#

PPT 第 36 页把”ElementPlus 的使用步骤”总结成三句，必须能脱口而出：

表格组件（PPT 第 39~40 页）#

用途（PPT 原文）：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

PPT 第 40 页用一张官方文档的截图点出了关键：

必答问答（PPT 第 40 页）：

表格常用写法整理成表：

本机实测（PPT 第 29~30 页那个案例的表格部分）：96 篇案例里的 <el-table :data="empList" border> 就是用它渲染的——empList 里是接口返回的4 行真实数据，ID / 姓名 / 入职日期 / 更新时间四列直接用 prop 取字段，而头像（<img :src="scope.row.image">）、性别（三元判断 scope.row.gender == 1 ? '男' : '女'）、职位（v-if 判断）三列因为要”加工”，都用了自定义列的写法。

分页条组件（PPT 第 41~42 页）#

用途（PPT 原文）：当数据量过多时，使用分页操作分解数据。

PPT 第 42 页给的额外信息就是上面那节”中文语言配置”（组件默认英文 → 引 zh-cn）。

课程工程里 ElementDemo.vue 的分页条（本机实测的页面截图中间那一行就是它）：

1
<el-pagination
2
  v-model:current-page="currentPage4"
3
  v-model:page-size="pageSize4"
4
  :page-sizes="[10, 20, 30, 40, 50, 75, 100]"
5
  :background="background"
6
  layout="total, sizes, prev, pager, next, jumper"
7
  :total="total"
8
  @size-change="handleSizeChange"
9
  @current-change="handleCurrentChange"
10
/>

1
const currentPage4 = ref(1);   //当前页码
2
const pageSize4 = ref(10);     //每页展示记录数
3
const total = ref(400);        //总记录数
4
const background = ref(true);  //是否有背景色
5

6
const handleSizeChange = (val) => {
7
  console.log(`每页展示: ${val} 条`)
8
}
9
const handleCurrentChange = (val) => {
10
  console.log(`当前页码是: ${val}`)
11
}

属性逐条对照：

本机实测：演示页上的分页条显示 “共 400 条、10条/页”，页码 1~6、省略号、40——因为代码里 total = 400、pageSize = 10（正好 40 页）；点页码时控制台会打印 当前页码是: X。

对话框组件（PPT 第 43~45 页）#

用途（PPT 原文）：在保留当前页面状态的情况下，告知用户并承载相关操作。

必答问答（PPT 第 45 页）：

课程工程里的用法（ElementDemo.vue）：

1
<!-- 打开按钮：点一下把那个 boolean 改成 true -->
2
<el-button plain @click="dialogTableVisible = true">打开Dialog对话框</el-button>
3

4
<!-- 对话框：v-model 绑着一个 boolean 变量 -->
5
<el-dialog v-model="dialogTableVisible" title="收货地址" width="800">
6
  <el-table :data="tableData">
7
    <el-table-column property="date" label="日期" width="150" />
8
    <el-table-column property="name" label="姓名" width="200" />
9
    <el-table-column property="address" label="地址" />
10
  </el-table>
11
</el-dialog>

1
const dialogTableVisible = ref(false);   //false=藏起来，true=显示出来

三句话记住它：

1. 先有一个 boolean 变量（ref(false)），它决定对话框”藏/显”；
2. v-model 绑上它——对话框右上角那个”ד关闭时，Vue 会自动把变量改回 false（这又是 v-model 双向绑定，20 篇学的）；
3. 打开靠点按钮：把变量改成 true。

本机实测：演示页上那个”打开Dialog对话框”按钮点一下，就会弹出一个 800 宽的对话框（里面装着一张表格），点关闭或遮罩就收起来。

表单组件（PPT 第 46~48 页）#

用途（PPT 原文）：表单包含 输入框, 单选框, 下拉选择, 多选框 等用户输入的组件。使用表单，可以收集、验证和提交数据。

必答问答（PPT 第 48 页）：

课程工程里的用法（ElementDemo.vue）：

1
<el-form :inline="true" :model="user" class="demo-form-inline">
2
  <el-form-item label="姓名">
3
    <el-input v-model="user.name" placeholder="请输入姓名" />
4
  </el-form-item>
5

6
  <el-form-item label="性别">
7
    <el-select v-model="user.gender" placeholder="请选择">
8
      <el-option label="男" value="1" />
9
      <el-option label="女" value="2" />
10
    </el-select>
11
  </el-form-item>
12

13
  <el-form-item label="生日">
14
    <el-date-picker
15
      v-model="user.birthday"
16
      type="date"
17
      placeholder="请选择"
18
      value-format="YYYY-MM-DD"
19
    />
20
  </el-form-item>
21

22
  <el-form-item>
23
    <el-button type="primary" @click="onSubmit">Query</el-button>
24
  </el-form-item>
25
</el-form>

1
//表单：一个对象装所有表单项的值
2
const user = ref({
3
  name: '',
4
  gender: '',
5
  birthday: ''
6
})
7

8
//提交：事件绑定的函数，在这里拿到用户填的数据
9
const onSubmit = () => {
10
  console.log(user.value);
11
}

结构说明：<el-form> 是表单容器，<el-form-item> 是一行表单项（label 是左边的标签文字）；采集数据全靠 v-model——输入框绑 user.name、下拉框绑 user.gender、日期选择器绑 user.birthday，用户在页面上填什么，user 这个对象里就有什么（96 篇案例里的查询条件 emp 用的是同一套写法）。提交就是把 @click="onSubmit" 绑到按钮上，在函数里用 user.value 拿到数据（真实项目里通常接着 axios.post(...) 发给后端）。

本机实测：演示页最下面的表单就是这三项（姓名 / 性别 / 生日）+ 一个 Query 按钮；点 Query，控制台打印出 {name: ..., gender: ..., birthday: ...} 这一份被采集好的数据——这就是”收集”两个字的意思。

一、知识回顾（读完直接做下面的实践题）#

1. ElementPlus 是饿了么团队研发的、基于 Vue3、面向设计师和开发者的组件库；组件 = 组成网页的部件（超链接、按钮、图片、表格、表单、分页条等）；官网 https://element-plus.org/zh-CN/
2. 快速入门三步：安装 → 引入 → 组件——安装 npm install element-plus@2.4.4 --save（在工程目录下执行）；引入在 main.js（引入组件库 + 引入 element-plus/dist/index.css 样式 + .use(ElementPlus)）；组件就是去官方文档复制代码再调整
3. 中文语言配置：import zhCn from 'element-plus/es/locale/lang/zh-cn'，然后 .use(ElementPlus, { locale: zhCn })——不配置的话组件里的内置文字是英文的
4. 表格组件：<el-table :data="数组"> 绑定要展示的数据，<el-table-column prop="字段名" label="列标题"> 声明每一列显示哪个属性；需要加工（图片、判断）时用 <template #default="scope">，行数据在 scope.row 里
5. 表格里的数据在项目里应该是 Ajax 异步请求服务端返回的（96 篇：onMounted + axios + empList.value = result.data.data），不是写死的死数据
6. 分页条组件：数据量过多时用它分解数据；关键绑定是 v-model:current-page（当前页码）、v-model:page-size（每页条数）、:total（总记录数）、layout（显示哪些部件：total/sizes/prev/pager/next/jumper）；@current-change、@size-change 分别在页码、每页条数变化时触发
7. 对话框组件：通过 model-value / v-model 给定的 boolean 值控制显示与隐藏（false 藏、true 显）；用途是”在保留当前页面状态的情况下，告知用户并承载相关操作”
8. 表单组件：用 el-form + el-form-item（label 是标签）+ 各种输入控件搭起来；表单项数据采集用 v-model 数据绑定、表单数据提交用事件绑定（按钮 @click）；表单能收集、验证、提交数据
9. 案例两件事：页面布局（上半部分搜索表单 + 下半部分表格，全用组件拼）+ 动态加载数据并渲染展示（打开页面自动请求接口，再渲染到表格）
10. 本机实测：演示页上有按钮 12 个（六种样式各两套）、表格 1 个 4 行、分页条 1 个（共 400 条 / 10条每页）、输入框 5 个、对话框 1 个；案例接口按 User-Agent 拦截无头浏览器（无头 405、普通浏览器正常，接口支持跨域、不需要配代理）；全量引入导致打包 js 877.21 KiB（gzip 290.77 KiB），官方另有”按需引入”的方向

二、裸写题#

• 2-1 用按钮组件做出两个按钮 要求：页面上有两个按钮——一个是主色调的实心按钮，文字”查询”；一个是次要样式的按钮，文字”清空”。两个按钮都要能在点击时在控制台打印出一句话，证明点击事件真的绑上了。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：按钮用组件库的按钮组件；颜色/样式靠”类型”属性区分；点击事件还是 Vue 的 @click，处理函数写在 <script setup> 里 二级 · 方法：<el-button>；主色调用 type="primary"、次要样式用 type="info"；点击处理函数写成普通函数即可（组合式 API 里没有 this） 三级 · 骨架：<el-button type="____" @click="____">查询</el-button> / <el-button type="____" @click="____">清空</el-button> / function search(){ console.log('____') }

  参考答案（做完再点开）

  1
  <!-- 参照 ElementDemo.vue 顶部那两行按钮的写法 -->
  2
  <script setup>
  3
  function search(){
  4
    console.log('点击了查询');
  5
  }
  6
  function clear(){
  7
    console.log('点击了清空');
  8
  }
  9
  </script>
  10
  
  11
  <template>
  12
    <el-button type="primary" @click="search">查询</el-button>
  13
    <el-button type="info" @click="clear">清空</el-button>
  14
  </template>
  15
  
  16
  <style scoped>
  17
  </style>

  显示更多显示更少

  检查点：① 两个按钮长得不一样（一个蓝底白字、一个灰底）；② 点一下控制台出现对应的那句话。工程里 EmpList.vue 的查询/清空按钮就是 type="primary" 和 type="info" 这一对。

• 2-2 用表格组件把一份数组渲染成表格 素材（把它当作接口返回的数据）：

  1
  const tableData = [
  2
    {date: '2016-05-03', name: 'Tom1', address: 'No. 189, Grove St, Los Angeles'},
  3
    {date: '2016-05-02', name: 'Tom2', address: 'No. 189, Grove St, Los Angeles'},
  4
    {date: '2016-05-04', name: 'Tom3', address: 'No. 189, Grove St, Los Angeles'},
  5
    {date: '2016-05-01', name: 'Tom4', address: 'No. 189, Grove St, Los Angeles'},
  6
  ]

  要求：页面上有一张带边框的表格，表头分别是”生日 / 姓名 / 住址”，三列分别显示上面每行对象的三个属性（生日列宽 260、姓名列宽 260、住址列自适应，内容居中对齐）。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：表格组件要两样东西——“数据”（一份数组）和”每一列显示哪个字段”（一列一行声明） 二级 · 方法：<el-table :data="tableData" border>；每列用 <el-table-column prop="..." label="..." width="..." align="center"/>；prop 写的是对象里的属性名，label 才是表头文字 三级 · 骨架：<el-table :____="tableData" border> / <el-table-column ____="date" label="生日" width="260" align="center"/> / 后两列同理（prop="name"、prop="address"）

  参考答案（做完再点开）

  1
  <!-- 这就是 ElementDemo.vue 里表格部分的写法 -->
  2
  <script setup>
  3
  const tableData = [
  4
    {date: '2016-05-03', name: 'Tom1', address: 'No. 189, Grove St, Los Angeles'},
  5
    {date: '2016-05-02', name: 'Tom2', address: 'No. 189, Grove St, Los Angeles'},
  6
    {date: '2016-05-04', name: 'Tom3', address: 'No. 189, Grove St, Los Angeles'},
  7
    {date: '2016-05-01', name: 'Tom4', address: 'No. 189, Grove St, Los Angeles'},
  8
  ]
  9
  </script>
  10
  
  11
  <template>
  12
    <el-table :data="tableData" border style="width: 100%">
  13
      <el-table-column prop="date" label="生日" width="260" align="center"/>
  14
      <el-table-column prop="name" label="姓名" width="260" align="center"/>
  15
      <el-table-column prop="address" label="住址" align="center"/>
  16
    </el-table>
  17
  </template>
  18
  
  19
  <style scoped>
  20
  </style>

  显示更多显示更少

  检查点：① 表头是中文的”生日 / 姓名 / 住址”（label 生效）；② 每行数据取的是对的字段（prop 生效）；③ 把 :data 的冒号去掉试试——冒号没了就变成”把 tableData 这五个字母当字符串传进去”，表格自然渲染不出数据（:data 是 20 篇讲的 v-bind，表示”里面是一个表达式/变量”）。

• 2-3 做一个”点按钮弹出对话框”的效果 要求：页面上有一个”打开Dialog对话框”按钮；点它弹出一个标题为”收货地址”的对话框（宽度 800），里面放一段文字（内容随意）；点对话框右上角的关闭图标能关掉，页面上其它内容始终不变。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：对话框是”显示/隐藏”由数据控制的东西——先准备一个表示”藏还是显”的变量，再让按钮去改它 二级 · 方法：<el-dialog v-model="dialogVisible" title="收货地址" width="800">；变量用 ref(false)；按钮 @click="dialogVisible = true" 三级 · 骨架：const dialogVisible = ref(____) / <el-button @click="dialogVisible = ____">打开Dialog对话框</el-button> / <el-dialog ____="dialogVisible" title="收货地址" width="800"> 内容 </el-dialog>

  参考答案（做完再点开）

  1
  <script setup>
  2
  import { ref } from 'vue';
  3
  
  4
  //false = 藏起来，true = 显示出来
  5
  const dialogVisible = ref(false);
  6
  </script>
  7
  
  8
  <template>
  9
    <el-button plain @click="dialogVisible = true">打开Dialog对话框</el-button>
  10
  
  11
    <el-dialog v-model="dialogVisible" title="收货地址" width="800">
  12
      <p>这里是对话框里的内容，可以放表格、表单等任何东西。</p>
  13
    </el-dialog>
  14
  </template>
  15
  
  16
  <style scoped>
  17
  </style>

  显示更多显示更少

  检查点：① 一进页面看不到对话框（false）；② 点按钮弹出来（true）；③ 点右上角 × 关掉，再点按钮还能弹出来——说明 v-model 把关闭动作也同步回了变量（v-model 是双向绑定）。 课程工程里对话框里装的是一张表格（<el-dialog v-model="dialogTableVisible" ...> + <el-table :data="tableData">），原理一模一样。

• 2-4 用表单项采集数据并打印出来 要求：页面上有一个表单，包含”姓名”（输入框）和”性别”（下拉框，男/女）两项，加一个”提交”按钮；用户在页面上填完，点提交时把采集到的数据打印到控制台（形如 {name: ..., gender: ...}）。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：组合式 API 里要”一个新的对象装表单数据”（用响应式的），每个控件都绑到它的某个字段上；提交就是把按钮的点击事件绑到一个函数，函数里把整个对象打印出来 二级 · 方法：const user = ref({name: '', gender: ''})；<el-form :model="user"> 里每一行用 <el-form-item label="...">；输入框 <el-input v-model="user.name">、下拉 <el-select v-model="user.gender"> 里放 <el-option label="男" value="1"/>；按钮 @click="onSubmit"，函数里 console.log(user.value) 三级 · 骨架：const user = ref({name: ____, gender: ____}) / <el-input v-model="user.____"> / <el-select v-model="user.____"> / const onSubmit = () => { console.log(user.____) }

  参考答案（做完再点开）

  1
  <!-- 参照 ElementDemo.vue 底部的表单写法 -->
  2
  <script setup>
  3
  import { ref } from 'vue';
  4
  
  5
  //一个对象装所有表单项的值
  6
  const user = ref({
  7
    name: '',
  8
    gender: ''
  9
  })
  10
  
  11
  //提交：事件绑定的处理函数，在这里拿到用户填的数据
  12
  const onSubmit = () => {
  13
    console.log(user.value);
  14
  }
  15
  </script>
  16
  
  17
  <template>
  18
    <el-form :inline="true" :model="user" class="demo-form-inline">
  19
      <el-form-item label="姓名">
  20
        <el-input v-model="user.name" placeholder="请输入姓名" />
  21
      </el-form-item>
  22
  
  23
      <el-form-item label="性别">
  24
        <el-select v-model="user.gender" placeholder="请选择">
  25
          <el-option label="男" value="1" />
  26
          <el-option label="女" value="2" />
  27
        </el-select>
  28
      </el-form-item>
  29
  
  30
      <el-form-item>
  31
        <el-button type="primary" @click="onSubmit">提交</el-button>
  32
      </el-form-item>
  33
    </el-form>
  34
  </template>
  35
  
  36
  <style scoped>
  37
  </style>

  显示更多显示更少

  检查点：① 输入框里打字、下拉选一项，然后点提交——控制台打印出的对象里就是你刚填的内容（比如 {name: '张三', gender: '1'}）；② 什么都不填直接提交，打印的是两个空字符串（说明 v-model 一直在同步，不是”点了才去读”）。 三点连起来看：v-model 负责采集（问题 2-4）、:data 负责展示（问题 2-2）、v-model 的 boolean 负责显隐（问题 2-3）——课程案例页面就是这么拼出来的。

三、综合题#

• 3-1 用组件库重做一遍员工列表页面 需求（和 PPT 第 50 页一样）：制作页面，并异步获取数据完成页面展示。分步做：

  1. 在工程里装上组件库，并在入口文件里引入（组件库本体 + 样式）；顺手把语言配成中文
  2. 新建页面组件，在根组件里引入它，让浏览器打开就能看到这个页面
  3. 布局上半部分：用表单容器 + 表单项搭出搜索区——姓名（输入框）、性别（下拉：男/女）、职位（下拉：班主任/讲师/学工主管/教研主管/咨询师），再加”查询""清空”两个按钮；每个控件都绑定到同一个”查询条件对象”的对应字段上
  4. 布局下半部分：用表格组件搭出员工表格——ID、姓名、头像、性别、职位、入职日期、更新时间七列；其中头像列放图片、性别列按 1/2 显示”男/女”、职位列按编码显示名称（这几列要自己做加工）
  5. 接数据：准备一个空数组，页面加载完自动向 https://web-server.itheima.net/emps/list 发请求（把第 3 步的三个条件拼到地址上），把返回的数组交给表格的 :data
  6. 接交互：查询按钮触发一次重新请求；清空按钮先把条件恢复成空、再请求一次
  7. 打开浏览器（用普通 Chrome/Edge）验证：表格里有 4 行数据；在姓名框里输入一个字点查询，表格只剩匹配的行；点清空又恢复 4 行
  提示（先自己想，实在想不出再点开）

  一级 · 思路：这一题 = 96 篇的数据逻辑 + 这一篇的组件布局。先把”数据”和”布局”两条线分开做，再接起来 二级 · 方法：安装 npm install element-plus@2.4.4 --save；main.js 里 import ElementPlus + import 'element-plus/dist/index.css' + .use(ElementPlus, { locale: zhCn })；条件对象 ref({name:'', gender:'', job:''})；el-form :model + el-input v-model / el-select v-model + el-option；表格 el-table :data="empList" + 七列 el-table-column（加工列用 <template #default="scope">，行数据在 scope.row）；onMounted + axios.get + empList.value = result.data.data 三级 · 骨架：<el-form :inline="true" :____="emp"> / <el-input v-model="emp.____"> / <el-select v-model="emp.____"> / <el-table :data="____" border> / <el-table-column prop="____" label="姓名"> / <template #default="scope">{{ scope.row.____ == 1 ? '男' : '女' }}</template>

  参考答案（做完再点开）

  1
  // main.js —— 引入组件库 + 样式 + 中文语言
  2
  import { createApp } from 'vue'
  3
  
  4
  import ElementPlus from 'element-plus'
  5
  import 'element-plus/dist/index.css'
  6
  import zhCn from 'element-plus/es/locale/lang/zh-cn'
  7
  
  8
  import App from './App.vue'
  9
  
  10
  createApp(App).use(ElementPlus, {locale: zhCn}).mount('#app')

  1
  <!-- src/views/EmpList.vue（数据部分照 96 篇，模板换成组件库的写法） -->
  2
  <script setup>
  3
  import { ref, onMounted } from 'vue';
  4
  import axios from 'axios';
  5
  
  6
  //表单（查询条件）
  7
  const emp = ref({name: '', gender: '', job: ''})
  8
  
  9
  //员工列表（先给空数组）
  10
  const empList = ref([]);
  11
  
  12
  //查询：把条件拼进地址，发请求，把数组交给 empList
  13
  const search = async () => {
  14
    const result = await axios.get(`https://web-server.itheima.net/emps/list?name=${emp.value.name}&gender=${emp.value.gender}&job=${emp.value.job}`);
  15
    empList.value = result.data.data;
  16
  }
  17
  
  18
  //清空：条件恢复成空，再查一次
  19
  const clear = () => {
  20
    emp.value = {name: '', gender: '', job: ''};
  21
    search();
  22
  }
  23
  
  24
  //页面加载完毕后自动查一次
  25
  onMounted(() => {
  26
    search();
  27
  })
  28
  </script>
  29
  
  30
  <template>
  31
    <div id="container">
  32
      <!-- 搜索表单 -->
  33
      <el-form :inline="true" :model="emp" class="demo-form-inline">
  34
        <el-form-item label="姓名">
  35
          <el-input v-model="emp.name" placeholder="请输入姓名" />
  36
        </el-form-item>
  37
  
  38
        <el-form-item label="性别">
  39
          <el-select v-model="emp.gender" placeholder="请选择">
  40
            <el-option label="男" value="1" />
  41
            <el-option label="女" value="2" />
  42
          </el-select>
  43
        </el-form-item>
  44
  
  45
        <el-form-item label="职位">
  46
          <el-select v-model="emp.job" placeholder="请选择">
  47
            <el-option label="班主任" value="1" />
  48
            <el-option label="讲师" value="2" />
  49
            <el-option label="学工主管" value="3" />
  50
            <el-option label="教研主管" value="4" />
  51
            <el-option label="咨询师" value="5" />
  52
          </el-select>
  53
        </el-form-item>
  54
  
  55
        <el-form-item>
  56
          <el-button type="primary" @click="search">查询</el-button>
  57
          <el-button type="info" @click="clear">清空</el-button>
  58
        </el-form-item>
  59
      </el-form>
  60
  
  61
      <!-- 表格 -->
  62
      <el-table :data="empList" border style="width: 100%">
  63
        <el-table-column prop="id" label="ID" width="100" align="center"/>
  64
        <el-table-column prop="name" label="姓名" width="120" align="center"/>
  65
        <el-table-column label="头像" width="180" align="center">
  66
          <template #default="scope">
  67
            <img :src="scope.row.image" height="40px">
  68
          </template>
  69
        </el-table-column>
  70
        <el-table-column label="性别" width="180" align="center">
  71
          <template #default="scope">
  72
            {{ scope.row.gender == 1 ? '男' : '女'}}
  73
          </template>
  74
        </el-table-column>
  75
        <el-table-column label="职位" width="180" align="center">
  76
          <template #default="scope">
  77
            <span v-if="scope.row.job == 1">班主任</span>
  78
            <span v-else-if="scope.row.job == 2">讲师</span>
  79
            <span v-else-if="scope.row.job == 3">学工主管</span>
  80
            <span v-else-if="scope.row.job == 4">教研主管</span>
  81
            <span v-else-if="scope.row.job == 5">咨询师</span>
  82
            <span v-else>其他</span>
  83
          </template>
  84
        </el-table-column>
  85
        <el-table-column prop="entrydate" label="入职日期" width="180" align="center"/>
  86
        <el-table-column prop="updatetime" label="更新时间" align="center"/>
  87
      </el-table>
  88
    </div>
  89
  </template>
  90
  
  91
  <style scoped>
  92
  #container {
  93
    width: 70%;
  94
    margin-left: 15%;
  95
    margin-right: 15%;
  96
  }
  97
  </style>

  显示更多显示更少

  1
  <!-- src/App.vue：根组件里显示这个页面 -->
  2
  <script setup>
  3
  import EmpList from './views/EmpList.vue'
  4
  </script>
  5
  
  6
  <template>
  7
    <EmpList></EmpList>
  8
  </template>
  9
  
  10
  <style scoped>
  11
  </style>

  检查点：

  1. 页面上表格有 4 行数据（谢逊 / 韦一笑 / 黛绮丝 / 殷天正），性别列显示”男 / 女”、职位列显示中文（说明自定义列加工成功）；
  2. 输入姓名点”查询”，表格只剩匹配的行；点”清空”恢复 4 行（条件被清空后重新查了一次）；
  3. 一定要用普通浏览器验证：本机实测带 HeadlessChrome 的 User-Agent 会被接口拦成 405（普通浏览器一切正常，接口支持跨域、不用配代理）；
  4. 头像列可能是裂图（本机实测课程数据里的 OSS 链接已失效），这不影响案例——关注数据链路是否打通即可；
  5. 想进一步练手：把分页条组件接到表格下面（用 96 篇的接口数据先做静态的 :total），或者给表格加一个”新增员工”按钮 + 对话框（组合问题 2-3、2-4 的做法）。