【vue-element】按钮的启用与禁用切换

最新推荐文章于 2024-05-20 10:46:58 发布

一个大萝北

最新推荐文章于 2024-05-20 10:46:58 发布

阅读量5.7k

点赞数 10

分类专栏： # vue # elementUI 前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_40797578/article/details/128619640

版权

前端同时被 3 个专栏收录

32 篇文章

订阅专栏

vue

20 篇文章

订阅专栏

elementUI

9 篇文章

订阅专栏

文章讲述了在Vue.js应用中，如何根据接口返回的数据（0表示禁用，1表示启用）来动态展示表格中行的状态，并实现按钮的启用与禁用切换。通过使用条件渲染和事件监听方法doAllow，实现了点击按钮时状态的取反更新，并通过changeStateAPI更改数据，然后重新加载列表以反映变化。

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

按钮的启用与禁用切换

接口传回来的数据 0 表示禁用 1表示启用,效果:

在这里插入图片描述

table状态栏的显示

在这里插入图片描述

<el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            {{ scope.row.state ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>

按钮的设置

在这里插入图片描述

<el-table-column>
          <template slot-scope="scope">
            <el-button @click="Preview(scope.row)" type="text" size="small"
              >预览</el-button
            >
            <el-button type="text" size="small" @click="doAllow(scope.row)">
              <template #default v-if="scope.row.state === 1"> 禁用 </template>
              <template #default v-else>启用 </template>
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="doEdit(scope.row)"
              :disabled="scope.row.state === 1"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="dodDel(scope.row)"
              :disabled="scope.row.state === 1"
              >删除</el-button
            >
          </template>
        </el-table-column>

点击切换事件

在这里插入图片描述

 // 点击启用按钮
    async doAllow (row) {
      console.log(row) // 禁用0, 启用1
      // 取反
      const state = row.state ? 0 : 1
      // 发送请求更改数据
      await changeState({ state, id: row.id })
      // 重新渲染数据
      this.loadList()
    }