在 Vue.js 中使用 Ant Design 实现表格开关功能：详细教程

码农阿豪@新空间代码工作室

于 2024-08-20 19:57:46 发布

阅读量2.1w

点赞数 23

分类专栏：包罗万象收集文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44976692/article/details/141367172

版权

收集同时被 2 个专栏收录

413 篇文章 4 订阅

订阅专栏

包罗万象

178 篇文章 2 订阅

订阅专栏

个人名片

🎓作者简介：java领域优质创作者
🌐个人主页：码农阿豪
📞工作室：新空间代码工作室（提供各种软件服务）
💌个人邮箱：[2435024119@qq.com]
📱个人微信：15279484656
🌐个人导航网站：www.forff.top
💡座右铭：总有人要赢。为什么不能是我呢？

专栏导航：

码农阿豪系列专栏导航
面试专栏：收集了java相关高频面试题，面试实战总结🍻🎉🖥️
Spring5系列专栏：整理了Spring5重要知识点与实战演练，有案例可直接使用🚀🔧💻
Redis专栏：Redis从零到一学习分享，经验总结，案例实战💐📝💡
全栈系列专栏：海纳百川有容乃大，可能你想要的东西里面都有🤸🌱🚀

在 Vue.js 中使用 Ant Design 实现表格开关功能：详细教程

在现代 Web 应用程序中，用户界面的交互性对于提升用户体验至关重要。一个常见的需求是在表格中实现状态的切换，例如启用/禁用某个功能或开关设备的状态。在这篇博客中，我们将详细探讨如何在 Vue.js 项目中使用 Ant Design Vue 实现表格中的开关功能，并在用户切换开关时与后台 API 进行交互来更新状态。我们将通过一个实际的示例来演示如何一步步实现这一功能，确保你能够在自己的项目中轻松应用。

一、项目背景与需求分析

假设我们正在开发一个广告管理平台，平台的一个核心功能是管理不同广告位的状态。广告位可以启用或禁用，管理员需要能够直接在表格中查看并切换广告位的状态。同时，每当状态被切换时，系统需要自动向后台发送请求以更新数据库中的状态。

在本文中，我们将使用以下技术栈：

Vue.js：一个流行的前端框架，用于构建用户界面。
Ant Design Vue：基于 Ant Design 的 Vue 实现，为 Vue.js 提供了一套丰富的 UI 组件。
Axios：一个用于发送 HTTP 请求的库，用来与后台 API 交互。

我们的最终目标是：

在表格中显示广告位的详细信息，包括启用/禁用状态。
使用 Ant Design Vue 的 a-switch 组件在表格中实现开关功能。
当用户切换开关时，调用后台 API 更新广告位的状态。
如果状态更新失败，回滚开关状态并提示用户。

二、准备工作

在开始编写代码之前，确保你已经在项目中安装并配置了必要的依赖项。如果你还没有安装 Ant Design Vue 和 Axios，可以通过以下命令安装：

npm install ant-design-vue axios

接下来，引入 Ant Design Vue 组件库，并在 main.js 中进行配置：

import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

Vue.use(Antd);

确保你的 Vue 项目中已经配置了 Axios，用于与后台 API 进行交互。

三、构建表格组件

我们将通过一个完整的示例代码来实现表格组件，展示广告位的相关信息，并在表格中实现开关功能。

1. 构建表格骨架

首先，我们在模板中构建一个表格组件，使用 Ant Design Vue 的 m-table 组件来展示数据：

<template>
  <a-card style="border-top: none">
    <div style="display: flex; justify-content: flex-end; margin-right: 16px; line-height: 28px; margin-bottom: 16px;">
      <a-button class="common-button-style1" type="primary" @click="add">新增</a-button>
    </div>
    <m-table
      rowKey="adSlotId"
      v-if="sorterFlag"
      bordered
      style="table-layout: fixed; word-break: break-all;"
      :scroll="{ x: 1550 }"
      :loading="loading"
      :columns="columns"
      :dataSource="data"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <!-- 表格列配置将在后续部分添加 -->
    </m-table>
    <!-- 新增/编辑表单 -->
    <space-form
      @close="handleFormClose"
      @success="handleFormSuccess"
      :searchData="searchData"
      :editVisiable="formVisiable"
      :isEdit="isEdit"
      :initialValues="initialValues">
    </space-form>
  </a-card>
</template>

<script>
export default {
  data() {
    return {
      data: [], // 表格数据
      loading: false, // 加载状态
      sorterFlag: true, // 排序标志
      pagination: { current: 1, pageSize: 10 }, // 分页配置
      columns: [
        { title: '类型标识', dataIndex: 'typeLabel', key: 'typeLabel' },
        { title: '广告位Id', dataIndex: 'adSlotId', key: 'adSlotId' },
        { title: 'OS', dataIndex: 'os', key: 'os' },
        { title: '广告类型', dataIndex: 'adType', key: 'adType' },
        { title: '渠道', dataIndex: 'channel', key: 'channel' },
        { title: '开启/关闭', dataIndex: 'isEnabled', key: 'isEnabled' }, // 开关列
        { title: '操作', key: 'operation' }
      ]
    };
  },
  methods: {
    handleTableChange() {
      // 表格改变处理逻辑
    },
    handleFormClose() {
      // 关闭表单处理逻辑
    },
    handleFormSuccess() {
      // 表单成功处理逻辑
    },
    add() {
      // 新增处理逻辑
    }
  }
};
</script>

<style scoped>
/* 样式自定义 */
</style>

2. 添加开关列

在上述表格中，我们已经为 isEnabled 列预留了一个位置。接下来，我们将使用 Ant Design Vue 的 a-switch 组件来实现这一列的开关功能。

<template slot="isEnabled" slot-scope="scope">
  <a-switch
    v-model="scope.record.isEnabled"
    @change="handleSwitchChange(scope.record)"
    :checked-children="'开启'"
    :un-checked-children="'关闭'"
    :checked="scope.record.isEnabled === '1'"
  />
</template>

在这里，我们通过 v-model 将开关组件与 scope.record.isEnabled 绑定，这样开关的状态就会与数据源中的状态保持同步。通过 @change 事件，我们可以捕获用户切换开关的操作并调用相应的方法来处理状态的更新。

3. 处理开关状态更新

为了实现状态的更新，我们需要在用户切换开关时调用后台 API。我们将在组件的 methods 中添加一个方法 handleSwitchChange，用于处理这一逻辑。

<script>
import { updateStatus } from '@/api/yourApi'; // 请根据实际情况调整路径

export default {
  methods: {
    async handleSwitchChange(record) {
      try {
        // 调用后台接口更新状态
        const response = await updateStatus({ id: record.adSlotId, isEnabled: record.isEnabled });
        console.log(response);

        if (response.code === this.CONSTVAL.SUCCESSCODE) {
          this.$message.success('状态更新成功');
        } else {
          this.$message.error(response.msg || '状态更新失败');
          // 如果更新失败，回滚开关状态
          record.isEnabled = !record.isEnabled;
        }
      } catch (error) {
        console.error('状态更新失败', error);
        this.$message.error('状态更新失败');
        // 如果更新失败，回滚开关状态
        record.isEnabled = !record.isEnabled;
      }
    }
  }
};
</script>

在这个方法中，我们使用了 async/await 语法来调用后台接口 updateStatus，并根据接口的响应来判断是否更新成功。如果更新失败，我们将回滚开关的状态并提示用户。

4. API 模块实现

假设你已经在 yourApi.js 文件中定义了 updateStatus 方法。该方法通过 Axios 向后台发送 PUT 请求来更新广告位的状态。

import axios from 'axios';

export const updateStatus = (params) => {
  return axios.put('/api/update-status', params);
};

在实际项目中，你需要确保 API 的路径和参数与后台接口一致，并正确处理响应数据。

5. 操作列的实现

在表格中，我们还需要一个操作列，提供一些常用的操作按钮，如编辑、删除等。你可以在操作列中继续使用 Ant Design Vue 的 a-button 组件，并绑定相应的操作方法。

<template slot="operation" slot-scope="text, record">
  <a-button type="link" style="color: blue;" @click="adjust(record)">
    <a-icon type="update" />
    调整
  </a-button>
  <a-button type="link" style="color: green;" @click="edit(record, true)">
    <a-icon type="edit" />
    编辑
  </a-button>
  <a-button type="link" style="color: red;" @click="handleDelete(record)">
    <a-icon type="delete" />
    删除
  </a-button>
  <a-button type="link" @click="handleViewChart(record)">
    <a-icon type="bar-chart" />
    图表
  </a-button>
</template>

在这个模板中，我们为每一行的记录提供了多个操作按钮，并绑定了不同的操作方法，例如编辑、删除、查看

图表等。