diff --git a/mock/demo/system.ts b/mock/demo/system.ts
index d5c7f908488..9cde354c9c5 100644
--- a/mock/demo/system.ts
+++ b/mock/demo/system.ts
@@ -152,6 +152,15 @@ export default [
       return resultPageSuccess(page, pageSize, roleList);
     },
   },
+  {
+    url: '/basic-api/system/setRoleStatus',
+    timeout: 500,
+    method: 'post',
+    response: ({ query }) => {
+      const { id, status } = query;
+      return resultSuccess({ id, status });
+    },
+  },
   {
     url: '/basic-api/system/getAllRoleList',
     timeout: 100,
diff --git a/src/api/demo/system.ts b/src/api/demo/system.ts
index 62ab4b8a0a0..69f1ac09b31 100644
--- a/src/api/demo/system.ts
+++ b/src/api/demo/system.ts
@@ -15,6 +15,7 @@ import { defHttp } from '/@/utils/http/axios';
 enum Api {
   AccountList = '/system/getAccountList',
   DeptList = '/system/getDeptList',
+  setRoleStatus = '/system/setRoleStatus',
   MenuList = '/system/getMenuList',
   RolePageList = '/system/getRoleListByPage',
   GetAllRoleList = '/system/getAllRoleList',
@@ -34,3 +35,6 @@ export const getRoleListByPage = (params?: RolePageParams) =>
 
 export const getAllRoleList = (params?: RoleParams) =>
   defHttp.get<RoleListGetResultModel>({ url: Api.GetAllRoleList, params });
+
+export const setRoleStatus = (id: number, status: string) =>
+  defHttp.post({ url: Api.setRoleStatus, params: { id, status } });
diff --git a/src/views/demo/system/role/role.data.ts b/src/views/demo/system/role/role.data.ts
index b49ea32fed7..f7854277aec 100644
--- a/src/views/demo/system/role/role.data.ts
+++ b/src/views/demo/system/role/role.data.ts
@@ -1,7 +1,10 @@
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { h } from 'vue';
-import { Tag } from 'ant-design-vue';
+import { Switch } from 'ant-design-vue';
+import { setRoleStatus } from '/@/api/demo/system';
+import { useMessage } from '/@/hooks/web/useMessage';
+
 export const columns: BasicColumn[] = [
   {
     title: '角色名称',
@@ -21,13 +24,33 @@ export const columns: BasicColumn[] = [
   {
     title: '状态',
     dataIndex: 'status',
-    width: 80,
+    width: 120,
     customRender: ({ record }) => {
-      const status = record.status;
-      const enable = ~~status === 0;
-      const color = enable ? 'green' : 'red';
-      const text = enable ? '启用' : '停用';
-      return h(Tag, { color: color }, () => text);
+      if (!Reflect.has(record, 'pendingStatus')) {
+        record.pendingStatus = false;
+      }
+      return h(Switch, {
+        checked: record.status === '1',
+        checkedChildren: '已启用',
+        unCheckedChildren: '已禁用',
+        loading: record.pendingStatus,
+        onChange(checked: boolean) {
+          record.pendingStatus = true;
+          const newStatus = checked ? '1' : '0';
+          const { createMessage } = useMessage();
+          setRoleStatus(record.id, newStatus)
+            .then(() => {
+              record.status = newStatus;
+              createMessage.success(`已成功修改角色状态`);
+            })
+            .catch(() => {
+              createMessage.error('修改角色状态失败');
+            })
+            .finally(() => {
+              record.pendingStatus = false;
+            });
+        },
+      });
     },
   },
   {