antd vue3 （a-switch开关）

最新推荐文章于 2025-02-26 21:26:57 发布

不知道起啥名字啊

最新推荐文章于 2025-02-26 21:26:57 发布

阅读量4.1k

点赞数 3

分类专栏： antd vue javascript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_54682264/article/details/125560199

版权

javascript 同时被 2 个专栏收录

7 篇文章

订阅专栏

antd vue

2 篇文章

订阅专栏

本文介绍了一个基于Vue.js的动态开关组件实现方法，并详细解释了如何根据用户的操作改变开关的状态，同时根据权限控制开关的可操作性。通过具体代码示例展示了如何使用a-switch组件并实现状态的异步更新。

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

<template v-if="column.key === 'status'">
            <a-switch
              :disabled="!user.authorities.includes('schedule:update')"
              :loading="loading"
              :checked="record.status"
              :checked-value="1"
              :unchecked-value="2"
              @change="editStatus(record)"
            />
          </template>

checkedValue

选中时的值

unCheckedValue

非选中时的值

checked(v-model)

指定当前是否选中

/** 修改用户状态 */
  const editStatus = async (row: InspectionScheduleDTO) => {
    loading = true
    const status = row.status === 1 ? 2 : 1

    try {
      await putInspectionScheduleEffective({
        id: row.id,
        status
      })
      row.status = status
      message.success('修改成功')
      reload()
    } catch (err: any) {
      message.error(err.message)
    } finally {
      loading = false
    }
  }

const status = row.status === 1 ? 2 : 1 如果选中的值为1的话就把它变成2，否则就变成1