作用与三步用法（PPT 第 8 页）#

第 8 页先给定义（这句话值得原样记住）：

作用：侦听一个或多个响应式数据源，并在数据源变化时调用传入的回调函数。

用法：① 导入 watch 函数；② 执行 watch 函数，传入要侦听的响应式数据源（ref 对象）和回调函数。

PPT 上的最小例子：

1
import { ref, watch } from 'vue'
2

3
const a = ref('')
4

5
watch(a, (newVal, oldVal) => {   // 侦听 a 的变化
6
  console.log(`a的值为: newVal: ${newVal}, oldVal: ${oldVal}`);
7
})

三行读完：

用一句话说人话：watch 是”当某个数据变了，自动执行一段代码”的开关。前面几篇里，代码都是”用户点了按钮 → 执行函数”（事件驱动）；watch 补上了另一种情况——数据被改了，我也想自动做点什么（数据驱动）。

侦听对象的单个属性（PPT 第 9 页）#

第一个参数是 ref 对象时，盯着的是这个 ref 的整体（.value 被换掉才触发）。如果只想盯对象里的某一个属性，第一个参数要传一个函数（PPT 第 9 页的写法）：

1
import { ref, watch } from 'vue'
2
const user = ref({name:'', age:10})
3

4
watch( () => user.value.name , (newVal , oldVal) => {   // 侦听 user 对象中 name 的变化
5
  console.log(`a的值为: newVal: ${newVal}, oldVal: ${oldVal}`);
6
})

() => user.value.name 这个箭头函数的作用是”把要盯的那个属性取出来交给 watch”——watch 会记住”这个函数读了 user.value.name”，于是以后只有 name 变了才回调（改 age 不会触发）。

第 10 页的问答里把这一点总结成：“参数一：侦听的源，可以是一个 ref 对象，一个函数等”——传函数，就是为了”盯住对象的某一个属性”。

侦听对象的全部属性（PPT 第 9 页）#

要盯整个对象里的所有属性，就在第三个数传一个配置对象，指定深度侦听：

1
import { ref, watch } from 'vue'
2
const user = ref({name:'', age:10})
3

4
watch(user, (newVal , oldVal) => {   // 侦听 user 对象中全部属性的变化
5
  console.log(`a的值为: newVal: ${newVal}, oldVal: ${oldVal}`);
6
}, {deep: true})                     // ← 第三个可选参数：深度侦听

为什么监视”整个对象”要额外加 deep: true？ 因为 watch 默认是浅层侦听：只关心”这个 ref 有没有被整体换掉”（比如 user.value = {name:'李四', age:20}）。而防 user.value.name = '李四' 这种”只改对象里的一个属性、对象本身还是那个对象”的改动，默认是看不见的。deep: true 就是让 watch 往对象里面看一层。

第 9 页把第三个可选参数里最常见的两个列了出来：

immediate: true 的用处举个本项目的例子：如果希望”页面一进来就把 date 拆一次”（或者把查询条件同步给接口），默认写法是 onMounted 里手动调一次；加了 immediate: true 就不用——watch 创建的那一刻先跑一遍回调，等于”初始化”和”后续变化”两件事用同一个函数处理了。

落到本项目：把日期范围拆成 begin / end#

现在把 watch 用到第 7 页留下的那个问题上——date 是数组，接口要 begin + end。完整版工程里的代码：

1
//侦听searchEmp中的date属性
2
watch(
3
  () => searchEmp.value.date,          // 侦听"搜索对象里的 date 这一个属性"
4
  (newValue, oldValue) => {            // date 一变就执行
5
     if(newValue.length == 2){         // 选齐了开始+结束两个日期
6
      searchEmp.value.begin = newValue[0]   // 数组第 0 个 → begin
7
      searchEmp.value.end = newValue[1]     // 数组第 1 个 → end
8
     }else {
9
      searchEmp.value.begin = ''       // 用户点了清空（数组变成空）→ 两个参数也清空
10
      searchEmp.value.end = ''
11
     }
12
  }
13
)

逐行对照着第 9 页的知识点：

按钮行#

1
<el-button type="primary" @click="addEmp"> + 新增员工</el-button>
2
<el-button type="danger" @click="deleteByIds"> - 批量删除</el-button>
3
<br><br>

两个按钮分别用 type="primary"（蓝色）和 type="danger"（红色）——颜色在这里是有含义的：新增是普通操作、批量删除是危险操作（和 99 篇给”删除”用红色是同一个思路）。addEmp 和 deleteByIds 两个方法分别属于 102 篇（新增）和 103 篇（删除），本篇先把按钮摆上去，让布局完整。

数据展示表格#

员工表格一共 9 列，比部门表格复杂，分三类：

1
<el-table :data="empList" border style="width: 100%" @selection-change="handleSelectionChange">
2
  <!-- ① 表格自带的特殊列：复选框列 -->
3
  <el-table-column type="selection" width="55" align="center"></el-table-column>
4

5
  <!-- ② 有现成字段、直接用 prop 显示的列 -->
6
  <el-table-column prop="name" label="姓名" width="120" align="center"></el-table-column>
7

8
  <!-- ③ 要自己加工才能显示的列：自定义列 -->
9
  <el-table-column label="性别" width="80" align="center">
10
    <template #default="scope">
11
      {{ scope.row.gender == 1 ? '男' : '女' }}
12
    </template>
13
  </el-table-column>
14
  <el-table-column label="头像" width="170" align="center">
15
    <template #default="scope">
16
      <img :src="scope.row.image" alt="Avatar" class="avatar" />
17
    </template>
18
  </el-table-column>
19
  <el-table-column prop="deptName" label="部门名称" width="170" align="center"></el-table-column>
20
  <el-table-column label="职位" width="120" align="center">
21
    <template #default="scope">
22
      {{ getJobTitle(scope.row.job) }}
23
    </template>
24
  </el-table-column>
25
  <el-table-column prop="entryDate" label="入职日期" width="180" align="center"></el-table-column>
26
  <el-table-column prop="updateTime" label="最后操作时间" width="210" align="center"></el-table-column>
27
  <el-table-column label="操作" fixed="right" align="center">
28
    <template #default="scope">
29
      <el-button size="small" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
30
      <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
31
    </template>
32
  </el-table-column>
33
</el-table>

把数字职位翻译成文字的那个函数，PPT 的布局素材（2. 表格-基本布局.vue）里是用一串 v-if 写的，完整版工程里改用 switch 写成函数：

1
// 职位转换函数
2
const getJobTitle = (job) => {
3
  switch (job) {
4
    case 1:
5
      return '班主任'
6
    case 2:
7
      return '讲师'
8
    case 3:
9
      return '学工主管'
10
    case 4:
11
      return '教研主管'
12
    case 5:
13
      return '咨询师'
14
    default:
15
      return '其他'
16
  }
17
}

分页条（PPT 第 12 页）#

第 12 页专门把”分页条”单独列了一页——它是这一节唯一没有见过的组件：

1
<el-pagination
2
  @size-change="handleSizeChange"
3
  @current-change="handleCurrentChange"
4
  :current-page="currentPage"
5
  :page-sizes="[10, 20, 30, 40]"
6
  :page-size="pageSize"
7
  layout="total, sizes, prev, pager, next, jumper"
8
  :total="total"
9
></el-pagination>

拆开看，它是”三个数据 + 两个事件 + 一个排版”：

接口这一层：加一个查询函数#

99 篇建立的 src/api/emp.js（按模块封装接口的文件），现在加进条件分页查询：

1
import request from '@/utils/request'
2

3
//查询员工列表（条件分页查询）
4
export const queryPageApi = (name,gender,begin,end,page,pageSize) => request.get(`/emps?name=${name}&gender=${gender}&begin=${begin}&end=${end}&page=${page}&pageSize=${pageSize}`)

① 页面加载完毕就查一次#

和 99 篇一样用钩子函数：

1
onMounted(async () => {
2
  handleSearch()                        // ← 页面一打开就先查第一页
3

4
  //加载所有部门数据（新增员工的"所属部门"下拉要用，102 篇讲）
5
  const result = await queryAllDeptApi();
6
  if(result.code){
7
    deptList.value = result.data
8
  }
9
})

onMounted 的回调在组件挂载完成后执行，此时 currentPage 是 1、pageSize 是 10、搜索条件全空——所以请求发出去的是”第 1 页、每页 10 条、不带条件”，页面一打开表格里就有数据。

② 点”查询”按钮#

1
<el-button type="primary" @click="handleSearch">查询</el-button>

按钮直接绑 handleSearch——点一下 = 用当前表单里的条件重新查（页码保持当前值；如果想让”重新查询”从第一页开始，可以在函数里先把 currentPage.value = 1）。

③ 页码 / 每页条数变化#

分页条的这两个事件，做法都是”先把新值存进变量，再重新查”：

1
// 每页展示记录数发生变化
2
const handleSizeChange = (val) => {
3
  pageSize.value = val
4
  handleSearch()
5
}
6
// 页码发生变化
7
const handleCurrentChange = (val) => {
8
  currentPage.value = val
9
  handleSearch()
10
}

事件回调的第一个参数就是分页条传出来的新值（新的每页条数 / 新的页码）。

顺带：清空按钮#

搜索栏上的”清空”按钮不属于 PPT 第 14 页那三条，但工程里有，做法正好顺带复习上面两个知识点：

1
const handleReset = () => {
2
  // 清空表单：把整个搜索对象恢复成初始值（注意 date 也要清）
3
  searchEmp.value = {
4
    name: '',
5
    gender: '',
6
    date: [],
7
    begin: '',
8
    end: ''
9
  }
10
  handleSearch()   // 清空之后马上按"无条件"再查一次
11
}

searchEmp 是一个对象（第 7 页的建议在这里省事了）：清空时整体赋一个新对象就行，不用一个个字段去还原。另外把 date 也清成空数组，watch 会跟着触发一次、把 begin/end 也置空——两条清理路径都指向”干净”。

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

1. 第 17 章做的模块与四个功能：员工管理——条件分页查询（本篇）/ 新增员工（102 篇）/ 修改员工、删除员工（103 篇）；顺序是先查，再增删改（增删改做完都要回头刷新这张列表）
2. emp 页面为什么是空壳：第 16 章的工程里 src/views/emp/index.vue 只有”员工管理”四个字，员工管理整块是留给学员自己实现的练习页；完整实现在第 18 章的 资料\05. 完整功能前端代码\vue-tlias-management.zip 里（本篇代码以它为准）
3. 员工管理页面的四块（PPT 第 6 页）：搜索栏 / 按钮 / 数据展示表格 / 分页条；其中”搜索栏”对应标题里的条件、“分页条”对应分页
4. 搜索表单绑成一个对象：searchEmp = ref({ name, gender, date, begin, end })——数据项多，绑成一个对象方便整体发请求、整体清空
5. 日期范围要三个字段：页面控件给的是数组 date: ['2025-01-01','2025-12-31']，接口要的是两个独立参数 begin、end；中间用 watch 侦听 date 来拆（选齐了取 [0]/[1]，清空了就把两个都置 ''）
6. watch 的作用与三个参数：侦听一个或多个响应式数据源，变化时调用回调函数；参数一 = 侦听的源（ref 对象 / 函数）、参数二 = 回调 (newVal, oldVal)、参数三 = 可选对象（常见 deep、immediate）
7. 侦听对象两种写法 + 两个选项：单个属性 watch(() => user.value.name, 回调)；全部属性 watch(user, 回调, {deep: true})——默认是浅层侦听，不加 deep 时”只改对象内部属性”不会触发；deep（boolean）= 是否深度侦听，immediate（boolean）= 是否在侦听创建时立即触发回调（默认都是 false）
8. 分页条的三个数据两个事件：:current-page（第几页）、:page-size（每页几条）、:total（总记录数，必须是接口返回的 total）；@size-change、@current-change 里做”改值 + 重新查询”；layout="total, sizes, prev, pager, next, jumper" 决定显示哪些部件
9. 接口与页面交互三条：接口 GET /emps?name=&gender=&begin=&end=&page=&pageSize=，响应 data 里是 { total, rows }（rows 给表格、total 给分页条）；交互三条 = 页面加载完毕查询（onMounted）/ 点查询按钮查询 / 页码或每页条数变化时查询，三条共用一个 handleSearch
10. 本机实测：表格 10 行、分页条 “共 30 条 1 2 3”、页面按钮是查询 / 清空 / + 新增员工 / - 批量删除 / 编辑 / 删除；头像列显示文字 Avatar 是因为 image 字段为空；最后操作时间带 T 是后端未格式化

二、裸写题#

• 2-1 把员工管理页的搜索栏搭出来 要求：页面标题”员工管理”，下面是一行横向排列的搜索表单，三个条件——姓名（输入框，提示”请输入员工姓名”）、性别（下拉，两个选项：男 / 女，值分别是 1 和 2）、入职日期（能一次选”开始日期 到 结束日期”的范围选择器）；这一行最后放两个按钮：“查询”（蓝色）和”清空”（灰色）。 另外要求：三个条件的数据不要用三个独立变量装，装进一个对象里（对象叫 searchEmp）。 检查点：① 三个表单项在同一行；② 范围选择器选完日期后，searchEmp.date 里是 ['2025-01-01','2025-12-31'] 这种字符串数组（不是 Date 对象）；③ 性别下拉选中后 searchEmp.gender 是 '1' 或 '2'。

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

  一级 · 思路：一行横向表单 = 一个表单容器 + 三个表单项 + 一个装着两个按钮的表单项；“装进一个对象”= 表单绑一个对象，每个控件的 v-model 写”对象.字段” 二级 · 方法：<el-form :inline="true" :model="searchEmp"> + <el-form-item label="...">；输入框 el-input、下拉 el-select + el-option、范围日期 el-date-picker 且 type="daterange"；日期要能用字符串取值，加 value-format="YYYY-MM-DD"；数据用 ref({ name:'', gender:'', date:[] }) 三级 · 骨架：<el-form :____="true" :____="searchEmp"> / <el-form-item label="姓名"><el-input v-____="searchEmp.____"></el-input></el-form-item> / <el-select v-model="searchEmp.____"><el-option label="男" value="1"/><el-option label="女" value="2"/></el-select> / <el-date-picker v-model="searchEmp.____" type="____" value-____="YYYY-MM-DD"/> / <el-button type="____" @click="handleSearch">查询</el-button>

  参考答案（做完再点开）

  1
  // 搜索表单对象：三个条件 + 后面要拆出来的 begin / end
  2
  const searchEmp = ref({
  3
    name: '',
  4
    gender: '',
  5
    date: [],
  6
    begin: '',
  7
    end: ''
  8
  })

  1
  <el-form :inline="true" :model="searchEmp">
  2
    <el-form-item label="姓名">
  3
      <el-input v-model="searchEmp.name" placeholder="请输入员工姓名"></el-input>
  4
    </el-form-item>
  5
  
  6
    <el-form-item label="性别">
  7
      <el-select v-model="searchEmp.gender" placeholder="请选择">
  8
        <el-option label="男" value="1"></el-option>
  9
        <el-option label="女" value="2"></el-option>
  10
      </el-select>
  11
    </el-form-item>
  12
  
  13
    <el-form-item label="入职日期">
  14
      <el-date-picker
  15
        v-model="searchEmp.date"
  16
        type="daterange"
  17
        range-separator="至"
  18
        start-placeholder="开始日期"
  19
        end-placeholder="结束日期"
  20
        value-format="YYYY-MM-DD"
  21
      ></el-date-picker>
  22
    </el-form-item>
  23
  
  24
    <el-form-item>
  25
      <el-button type="primary" @click="handleSearch">查询</el-button>
  26
      <el-button @click="handleReset">清空</el-button>
  27
    </el-form-item>
  28
  </el-form>

  显示更多显示更少

  检查点：① 不写 :inline="true" 的话三个表单项会各占一行；② 不写 value-format 时 date 里是两个 Date 对象，直接发给后端会解析失败；③ 对照 PPT 第 7 页和课程资料 03. 员工管理-基础文件\1. 搜索栏-基本布局.vue。

• 2-2 把日期范围数组拆成 begin 和 end 素材：页面上的日期范围控件给出的是一个数组，例如 ['2025-01-01', '2025-12-31']；用户点”清空”后它变成一个空数组。而接口要的是两个独立的参数 begin 和 end。 要求：在 2-1 的搜索对象里加两个字段 begin、end，然后让它俩跟着日期范围自动同步——数组里有开始和结束两个值时，分别填进 begin/end；数组被清空时，begin/end 也一起清空。不要在点查询按钮时才去拆，要”数组一变就同步”。 检查点：① 选完日期不点任何按钮，对象里的 begin/end 就已经有值了；② 点”清空”之后 begin/end 变回空字符串；③ 只盯着日期这一个属性做同步，改姓名 / 性别不应该触发这段代码。

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

  一级 · 思路：要的是”某个数据一变，自动执行一段代码”——这正是侦听器干的活；盯的是搜索对象里那一个属性（日期数组），不是整个对象 二级 · 方法：从 vue 里按需导入 watch；第一个参数传一个箭头函数把数组取出来（() => searchEmp.value.date，这叫”侦听对象的单个属性”）；第二个参数是回调，newValue 就是最新的数组——用 newValue.length == 2 判断”选齐了没有”，else 分支把两个字段清空 三级 · 骨架：import { ref, ____ } from 'vue' / ____(() => searchEmp.value.____, (newValue, oldValue) => { if(newValue.____ == 2){ searchEmp.value.begin = newValue[____]; searchEmp.value.end = newValue[____] } else { searchEmp.value.begin = ____; searchEmp.value.end = ____ } })

  参考答案（做完再点开）

  1
  import { ref, watch } from 'vue'
  2
  
  3
  //搜索表单对象
  4
  const searchEmp = ref({
  5
    name: '',
  6
    gender: '',
  7
    date: [],
  8
    begin: '',
  9
    end: ''
  10
  })
  11
  
  12
  //侦听searchEmp中的date属性
  13
  watch(
  14
    () => searchEmp.value.date,
  15
    (newValue, oldValue) => {
  16
       if(newValue.length == 2){          // 选齐了开始 + 结束
  17
        searchEmp.value.begin = newValue[0]
  18
        searchEmp.value.end = newValue[1]
  19
       }else {                            // 被清空（空数组）
  20
        searchEmp.value.begin = ''
  21
        searchEmp.value.end = ''
  22
       }
  23
    }
  24
  )

  显示更多显示更少

  检查点：① 第一个参数写成 () => searchEmp.value.date（函数）就是”盯单个属性”；写成 searchEmp 再加 {deep: true} 也能跑，但那是”盯全部属性”，改姓名、改性别都会触发；② 别忘 else 分支——否则”清空日期”之后 begin/end 还留着上一次的值，请求会带着旧条件；③ 对照完整版工程 src/views/emp/index.vue 里那段 watch(() => searchEmp.value.date, ...)。

• 2-3 把三条交互接上（加载完查一次、点查询、翻页） 素材（接口）：GET /emps?name=&gender=&begin=&end=&page=&pageSize=，响应结构 { "code": 1, "msg": "success", "data": { "total": 30, "rows": [ ... ] } }，code 为 1 表示成功。 要求：① 页面一打开就自动查一次（第 1 页、每页 10 条）；② 点搜索栏的”查询”按钮，用当前表单里的条件重新查；③ 分页条上换页码或改每页条数时也重新查。三次查询共用同一个查询函数，查询函数要会把返回的 rows 交给表格、total 交给分页条。 检查点：① 刷新页面，表格自动出现 10 行、分页条显示”共 30 条”；② 点第 2 页，表格内容变成第 2 页的数据（表格数据来自接口，不是前端切片）；③ 把”每页条数”改成 20，请求里的 pageSize 变成 20。

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

  一级 · 思路：三条交互 = 三个”入口”，入口里都只做一件事——调用查询函数；查询函数里做”发请求 → 判断状态码 → 把 rows 给表格、total 给分页条” 二级 · 方法：数据源变量 ref([])；分页三个变量 currentPage / pageSize / total 都用 ref；“页面加载完”用钩子函数 onMounted；按钮用 @click；分页条用 @size-change / @current-change，两个回调的参数就是新值，先改变量再调查询函数 三级 · 骨架：const handleSearch = async () => { const result = await ____(searchEmp.value.name, searchEmp.value.gender, searchEmp.value.begin, searchEmp.value.end, currentPage.____, pageSize.____); if(result.____){ empList.value = result.data.____; total.value = result.data.____ } } / ____(() => { handleSearch() }) / const handleSizeChange = (val) => { pageSize.value = val; ____() } / const handleCurrentChange = (val) => { currentPage.value = val; ____() }

  参考答案（做完再点开）

  1
  import { ref, onMounted } from 'vue'
  2
  import { queryPageApi } from '@/api/emp'
  3
  
  4
  // 表格数据源（当前页的员工列表）
  5
  const empList = ref([])
  6
  
  7
  // 分页配置
  8
  const currentPage = ref(1)    // 第几页
  9
  const pageSize = ref(10)      // 每页几条
  10
  const total = ref(0)          // 总记录数（分页条用）
  11
  
  12
  //查询员工（条件分页查询）
  13
  const handleSearch = async () => {
  14
    const result = await queryPageApi(searchEmp.value.name, searchEmp.value.gender, searchEmp.value.begin, searchEmp.value.end, currentPage.value, pageSize.value);
  15
    if(result.code){
  16
      empList.value = result.data.rows     // 当前页数据 → 表格
  17
      total.value = result.data.total      // 总记录数 → 分页条
  18
    }
  19
  }
  20
  
  21
  // ① 页面加载完毕就查一次
  22
  onMounted(() => {
  23
    handleSearch()
  24
  })
  25
  
  26
  // ② 点"查询"按钮：模板里写 @click="handleSearch"
  27
  
  28
  // ③ 每页条数变化
  29
  const handleSizeChange = (val) => {
  30
    pageSize.value = val
  31
    handleSearch()
  32
  }
  33
  // ③ 页码变化
  34
  const handleCurrentChange = (val) => {
  35
    currentPage.value = val
  36
    handleSearch()
  37
  }

  显示更多显示更少

  1
  <el-table :data="empList" border style="width: 100%">
  2
    <el-table-column type="selection" width="55" align="center"></el-table-column>
  3
    <el-table-column prop="name" label="姓名" width="120" align="center"></el-table-column>
  4
    <!-- 其余列见 2-4 与综合题 -->
  5
  </el-table>
  6
  
  7
  <el-pagination
  8
    @size-change="handleSizeChange"
  9
    @current-change="handleCurrentChange"
  10
    :current-page="currentPage"
  11
    :page-sizes="[10, 20, 30, 40]"
  12
    :page-size="pageSize"
  13
    layout="total, sizes, prev, pager, next, jumper"
  14
    :total="total"
  15
  ></el-pagination>

  显示更多显示更少

  检查点：① 写成 result.data 交给表格会拿到一个对象（不是数组），表格会空白——要写 result.data.rows；② 分页条的 :total 必须绑接口返回的总数，绑成 empList.length 的话分页条只会显示”共 10 条、1 页”；③ 换页返回的数据是后端重新查的（48 篇的 LIMIT 在后端）。

• 2-4 辨析题（三种侦听写法 + 两个选项） 要求：为下面每个需求选一种侦听写法，并说清第三个参数要不要加、加什么—— ① 盯住搜索对象里的日期数组（就是 2-2）； ② 盯住整个 employee 表单对象（102 篇要用：工作经历的日期一变就同步）； ③ 希望”侦听创建的那一瞬间先执行一次回调”，不要点了才执行； ④ 判断题：watch(user, 回调) 能侦听到 user.value.name = '李四' 这种改动吗？为什么？ 检查点：① 每个需求都要说出”第一个参数传什么、第三个参数加不加”；② 判断题要落到”默认是浅层还是深层”上。

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

  一级 · 思路：判断”盯的是对象的某个属性还是整个对象”——盯一个属性传函数、盯整个对象加 deep；“创建时就执行”不是靠 deep，而是第三个参数里的另一个选项 二级 · 方法：() => 对象.value.属性名 = 单个属性；{deep: true} = 全部属性（默认浅层侦听）；{immediate: true} = 创建时立即触发；两个选项可以同时写在同一个配置对象里 三级 · 骨架：① ____(() => searchEmp.value.____, 回调)；② watch(employee, 回调, {____: true})；③ 第三个参数写成 {____: true}；④ 从”默认浅层侦听”这句话出发解释”对象没被整体替换”时会发生什么

  参考答案（做完再点开）

  ① 侦听对象的单个属性：

  1
  watch(() => searchEmp.value.date, (newValue, oldValue) => { /* 拆 begin / end */ })

  第一个参数传”取属性的函数”，不需要第三个参数（盯的是 date 这个数组本身）。

  ② 侦听对象的全部属性（深度侦听）：

  1
  watch(employee, (newVal, oldVal) => { /* 把每行工作经历的 exprDate 拆成 begin / end */ }, {deep: true})

  对象内部的任何属性（包括数组里每个元素的属性）变化都触发回调，所以必须加 deep: true。

  ③ 加的是 immediate：

  1
  watch(源, 回调, {immediate: true})

  默认 false（只有变化才触发）；true 表示侦听创建时立即先触发一次回调——适合”初始化和后续变化共用同一段代码”。

  ④ 不能。watch 默认是浅层侦听：user.value.name = '李四' 只改了对象内部的一个属性，user.value 本身没被换成新对象，所以回调不会触发；想侦听到就得加第三个参数 {deep: true}（或者改成侦听那一个属性 () => user.value.name）。

三、综合题#

• 3-1 照课程案例做一遍”员工管理-条件分页查询” 分步做（顺序和 PPT 第 5~14 页一致）：

  1. 打开第 16 章的工程，点左侧菜单”员工管理”进入 /emp——页面主体是空的（这就是留给自己的练习页）
  2. 照页面原型搭搜索栏：姓名输入框、性别下拉、入职日期范围选择器，外加”查询 / 清空”按钮；三个条件绑到一个对象里（对象里给日期范围留 date 数组，并留出 begin/end）
  3. 写 watch：盯住那个日期数组，一变就拆成 begin/end（清空时两个都置空）
  4. 搭按钮行：蓝色”+ 新增员工”、红色”- 批量删除”（点击事件先留空）
  5. 搭表格：复选框列（type="selection"）、姓名、性别（1/2 → 男/女）、头像（<img :src>）、部门名称（prop="deptName"）、职位（数字 → 文字）、入职日期、最后操作时间、操作列（编辑/删除，fixed="right"）
  6. 搭分页条：三个数据（当前页、每页条数、总记录数）+ 两个变化事件 + layout
  7. 写查询函数（条件 + 分页参数一起发，rows 给表格、total 给分页条），再把三条交互接上：加载完毕查一次、点查询按钮查、页码/条数变化查；顺手把”清空”也做完
  8. 启动后端（课程那套 tlias-web-management），确认它跑在哪个端口、和 vite.config.js 里代理的 target 对得上；打开浏览器验证
  9. 打开 F12 → Network，看这一次请求的地址（/api/emps?...）和响应（data.total、data.rows 各是什么）
  10. 顺手练排查：把”每页条数”改成 20 看请求里的 pageSize 变化；把日期范围选上再点查询，看请求里 begin/end 是否带上
  提示（先自己想，实在想不出再点开）

  一级 · 思路：布局四块（搜索栏 / 按钮 / 表格 / 分页条）+ 交互三条（加载完 / 点查询 / 翻页条数变化），中间夹一个 watch 做日期翻译；接口和工具类都沿用 99 篇那套 二级 · 方法：el-form :inline + el-input / el-select / el-date-picker type="daterange" value-format；watch(() => 对象的.value.属性, 回调)；el-table + el-table-column（type="selection"、prop、#default="scope"、fixed="right"）；el-pagination（:current-page / :page-size / :total / @size-change / @current-change / layout）；ref 装 empList / currentPage / pageSize / total；onMounted + async/await 三级 · 骨架：const searchEmp = ref({ name:'', gender:'', date:[], ____:'', ____:'' }) / watch(() => searchEmp.value.____, (newValue) => { … }) / const handleSearch = async () => { const result = await queryPageApi(…); if(result.code){ empList.value = result.data.____; total.value = result.data.____ } } / onMounted(() => { ____() }) / <el-pagination :____="total" …>

  参考答案（做完再点开）

  1
  // src/api/emp.js —— 加一个"条件分页查询"的接口函数
  2
  import request from '@/utils/request'
  3
  
  4
  export const queryPageApi = (name,gender,begin,end,page,pageSize) => request.get(`/emps?name=${name}&gender=${gender}&begin=${begin}&end=${end}&page=${page}&pageSize=${pageSize}`)

  1
  <!-- src/views/emp/index.vue —— 脚本部分 -->
  2
  <script setup>
  3
  import { ref, watch, onMounted } from 'vue'
  4
  import { queryPageApi } from '@/api/emp'
  5
  
  6
  //搜索表单对象
  7
  const searchEmp = ref({
  8
    name: '',
  9
    gender: '',
  10
    date: [],
  11
    begin: '',
  12
    end: ''
  13
  })
  14
  
  15
  //侦听searchEmp中的date属性：把日期数组拆成接口要的两个参数
  16
  watch(
  17
    () => searchEmp.value.date,
  18
    (newValue, oldValue) => {
  19
       if(newValue.length == 2){
  20
        searchEmp.value.begin = newValue[0]
  21
        searchEmp.value.end = newValue[1]
  22
       }else {
  23
        searchEmp.value.begin = ''
  24
        searchEmp.value.end = ''
  25
       }
  26
    }
  27
  )
  28
  
  29
  // 表格数据源
  30
  const empList = ref([])
  31
  
  32
  // 分页配置
  33
  const currentPage = ref(1)
  34
  const pageSize = ref(10)
  35
  const total = ref(0)
  36
  
  37
  //查询员工（条件分页查询）
  38
  const handleSearch = async () => {
  39
    const result = await queryPageApi(searchEmp.value.name, searchEmp.value.gender, searchEmp.value.begin, searchEmp.value.end, currentPage.value, pageSize.value);
  40
    if(result.code){
  41
      empList.value = result.data.rows
  42
      total.value = result.data.total
  43
    }
  44
  }
  45
  
  46
  //清空搜索条件，再重新查一次
  47
  const handleReset = () => {
  48
    searchEmp.value = {
  49
      name: '',
  50
      gender: '',
  51
      date: [],
  52
      begin: '',
  53
      end: ''
  54
    }
  55
    handleSearch()
  56
  }
  57
  
  58
  // 分页处理：改完值重新查
  59
  const handleSizeChange = (val) => {
  60
    pageSize.value = val
  61
    handleSearch()
  62
  }
  63
  const handleCurrentChange = (val) => {
  64
    currentPage.value = val
  65
    handleSearch()
  66
  }
  67
  
  68
  // 职位转换函数：数字 → 文字
  69
  const getJobTitle = (job) => {
  70
    switch (job) {
  71
      case 1:
  72
        return '班主任'
  73
      case 2:
  74
        return '讲师'
  75
      case 3:
  76
        return '学工主管'
  77
      case 4:
  78
        return '教研主管'
  79
      case 5:
  80
        return '咨询师'
  81
      default:
  82
        return '其他'
  83
    }
  84
  }
  85
  
  86
  //钩子函数：页面加载完毕先查一次
  87
  onMounted(() => {
  88
    handleSearch()
  89
  })
  90
  </script>
  91
  
  92
  <template>
  93
    <h1>员工管理</h1> <br>
  94
    <el-form :inline="true" :model="searchEmp">
  95
      <el-form-item label="姓名">
  96
        <el-input v-model="searchEmp.name" placeholder="请输入员工姓名"></el-input>
  97
      </el-form-item>
  98
      <el-form-item label="性别">
  99
        <el-select v-model="searchEmp.gender" placeholder="请选择">
  100
          <el-option label="男" value="1"></el-option>
  101
          <el-option label="女" value="2"></el-option>
  102
        </el-select>
  103
      </el-form-item>
  104
      <el-form-item label="入职日期">
  105
        <el-date-picker
  106
          v-model="searchEmp.date"
  107
          type="daterange"
  108
          range-separator="至"
  109
          start-placeholder="开始日期"
  110
          end-placeholder="结束日期"
  111
          value-format="YYYY-MM-DD"
  112
        ></el-date-picker>
  113
      </el-form-item>
  114
      <el-form-item>
  115
        <el-button type="primary" @click="handleSearch">查询</el-button>
  116
        <el-button @click="handleReset">清空</el-button>
  117
      </el-form-item>
  118
    </el-form>
  119
  
  120
    <el-button type="primary"> + 新增员工</el-button>
  121
    <el-button type="danger"> - 批量删除</el-button>
  122
    <br><br>
  123
  
  124
    <el-table :data="empList" border style="width: 100%">
  125
      <el-table-column type="selection" width="55" align="center"></el-table-column>
  126
      <el-table-column prop="name" label="姓名" width="120" align="center"></el-table-column>
  127
      <el-table-column label="性别" width="80" align="center">
  128
        <template #default="scope">
  129
          {{ scope.row.gender == 1 ? '男' : '女' }}
  130
        </template>
  131
      </el-table-column>
  132
      <el-table-column label="头像" width="170" align="center">
  133
        <template #default="scope">
  134
          <img :src="scope.row.image" alt="Avatar" class="avatar" />
  135
        </template>
  136
      </el-table-column>
  137
      <el-table-column prop="deptName" label="部门名称" width="170" align="center"></el-table-column>
  138
      <el-table-column label="职位" width="120" align="center">
  139
        <template #default="scope">
  140
          {{ getJobTitle(scope.row.job) }}
  141
        </template>
  142
      </el-table-column>
  143
      <el-table-column prop="entryDate" label="入职日期" width="180" align="center"></el-table-column>
  144
      <el-table-column prop="updateTime" label="最后操作时间" width="210" align="center"></el-table-column>
  145
      <el-table-column label="操作" fixed="right" align="center">
  146
        <template #default="scope">
  147
          <el-button size="small" type="primary">编辑</el-button>
  148
          <el-button size="small" type="danger">删除</el-button>
  149
        </template>
  150
      </el-table-column>
  151
    </el-table>
  152
    <br>
  153
  
  154
    <el-pagination
  155
      @size-change="handleSizeChange"
  156
      @current-change="handleCurrentChange"
  157
      :current-page="currentPage"
  158
      :page-sizes="[10, 20, 30, 40]"
  159
      :page-size="pageSize"
  160
      layout="total, sizes, prev, pager, next, jumper"
  161
      :total="total"
  162
    ></el-pagination>
  163
  </template>
  164
  
  165
  <style scoped>
  166
  .avatar {
  167
    height: 40px;
  168
  }
  169
  </style>

  显示更多显示更少

  检查点：

  1. 表格自动出现 10 行数据、序号不需要自己造（这页没有序号列，但复选框要能勾）；
  2. 分页条显示 “共 30 条”、页码 1 2 3（本机实测就是这三个数）；
  3. F12 → Network 里的请求是 /api/emps?name=&gender=&begin=&end=&page=1&pageSize=10，响应里有 data.total 和 data.rows；
  4. 选一个日期范围点”查询”，请求里的 begin/end 变成 2025-01-01 这种格式——说明 watch 那一段真的在工作；
  5. 点”清空”后表格回到 10 行、条件框全空、begin/end 也是空的；
  6. 头像列显示 Avatar 文字是正常的（那几行没上传头像，走的是 alt）。 做完这一题，102 篇会在这个页面上加”新增员工”：那里新增/修改共用一个对话框，保存成功后回头调的就是本篇这个 handleSearch()。