[TOC]
通过课程上下架接⼝操作：地址 // services/course.js … // 课程上下架 export const changeState = params => { return request({ method: ‘GET’, url: ‘/boss/course/changeState’, params }) } 引⼊ import { getQueryCourses, changeState } from ‘@/services/course’

切换开关时发送请求，通过⽂档得知，Switch 组件具有 change 事件，进⾏设置。

默认参数为切换后新的状态值，这⾥我们需要的是要切换的课程信息⽤于请求操作

… @change=“onStateChange(scope.row)”> …

设置完毕，为了避免⽤户在⼀次上下架未完成时频繁点击，可进⾏触发限制。

在请求课程信息后，给每条课程信息对象添加 isStatusLoading 属性

// list.vue … // 加载课程（准备⼯作中设置） async loadCourses () { this.isLoading = true const { data } = await getQueryCourses(this.filterParams) if (data.code === ‘000000’) { // 给媒体数据设置属性，标识状态是否处于切换中，默认 false（本⼩节添加的功 能） data.data.records.forEach(item => { item.isStatusLoading = false }) // 保存课程信息 this.courses = data.data.records this.totalCount = data.data.total this.isLoading = false } }, …

将属性绑定给 Switch 组件的 disabled 属性，当状态更改过程中，组件⾃动禁⽤。

// list.vue … :disabled=“scope.row.isStatusLoading” …> …

最后，在请求操作过程中设置 isStatusLoading 属性值即可。

// list.vue … // 上下架按钮操作 async onStateChange (course) { // 请求发送前，更改课程操作状态 course.isStatusLoading = true … if (data.code === ‘000000’) { … // 请求完毕，更改课程操作状态 course.isStatusLoading = false } } …