素材管理（三）-全部与收藏切换-radio单选框按钮样式组件切换显示和隐藏-隐藏pagination分页组件 & 收藏素材-状态切换-async异步方法提交后台数据

最新推荐文章于 2022-10-08 09:59:36 发布

原创最新推荐文章于 2022-10-08 09:59:36 发布 · 618 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

项目-vue-PC端专栏收录该内容

53 篇文章

订阅专栏

本文介绍如何使用Element UI的radio单选框组件实现素材管理页面的全部与收藏切换功能，包括监听切换事件、分页组件的显示与隐藏，以及通过点击图标实现素材收藏状态的改变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

04-素材管理-全部与收藏切换

监听用户的切换行为（radio单选框组件中的按钮样式的值改变事件）

组件网址：radio单选框组件中的按钮样式
https://element.eleme.cn/#/zh-CN/component/radio
- 看事件的名称：change
- 传参：选中的label的值（v-model反馈 reqParams.collect）
- 当筛选条件改变后：页码设置第一页
- 重新查询即可

div盒子添加change事件：

<el-radio-group @change="changeCollect"

methods中修改事件方法：

// 切换了全部收藏
    changeCollect () {
      this.reqParams.page = 1
      this.getImages()
    },

分页小于2页，隐藏pagination分页组件：

网址：隐藏pagination分页组件
https://element.eleme.cn/#/zh-CN/component/pagination

 <el-pagination
      style="text-align:center"
      background layout="prev, pager, next"
      :total="total"
      :page-size="reqParams.per_page"
      :current-page="reqParams.page"
      @current-change="changePager"
      //直接添加已有的事件属性
+      hide-on-single-page
      ></el-pagination>

05-素材管理-收藏素材

点击收藏图标
- 如果，状态是未收藏，操作：添加收藏
- 反之，取消收藏
- 发请求
  - 成功：图片的状态是收藏图标红色取消收藏图标白色

<span @click="toggleCollect(item)" class="el-icon-star-off" :class="{red:item.is_collected}"></span>

异步方法提交数据使用async

// 切换图片状态
    async toggleCollect (item) {
      // 提交给后台的状态  说白就是当状态的取反
      const { data: { data } } = await this.$http.put(`user/images/${item.id}`, {
        collect: !item.is_collected
      })
      // 操作成功（取消收藏成功  添加收藏成功）
      this.$message.success(data.collect ? '添加收藏成功' : '取消收藏成功')
      // 更新列表（重新获取后台数据进行更新） 后端有排序 收藏的图片靠前排序
      // 更新当前图片的数据 数据驱动视图 更新图标颜色
      item.is_collected = data.collect
    },