点击禁用和启用按钮切换

鱼鱼子啊

已于 2023-02-13 20:04:57 修改

阅读量526

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript Powered by 金山文档

于 2023-02-13 20:03:40 首次发布

本文链接：https://blog.csdn.net/m0_74848897/article/details/129015872

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了如何在前端通过点击事件改变按钮的启用和禁用状态。首先，通过@click绑定事件处理函数Disable，根据状态state显示或隐藏修改和删除按钮。其次，使用枚举定义状态值，如已启用和已禁用。当点击禁用或启用时，更新表格数据并发送请求更新后台状态，完成后给出操作成功的提示。

摘要由CSDN通过智能技术生成

例如：当我点击启用的时候，修改和删除就可以正常点击使用

第一步：给按钮绑定点击事件@click='Disable(row.id , row.state)',通过作用于插槽可以获取到id，和state，state是状态，修改和删除按钮可以用disabled进行显示和隐藏

第二步：状态那一栏也要绑定一个枚举

枚举可以直接就写在methods方法里面

  methods: {
 formatState(row, column, cellValue, index) {
      const hireType = [
        {
          id: 0,
          value: '已启用'
        },
        {
          id: 1,
          value: '已禁用'
        }
      ]
      const obj = hireType.find((item) => {
        return item.id === cellValue
      })
      return obj ? obj
}

第三步：点击按钮的时候

 // 点击禁用
    async Disable(id, state) {
      try {
        state = state ? 0 : 1
        this.tableData.forEach(item => {
          if (item.id === id) {
            item.state = state
          }
        })
         //发生请求更新当前页面状态更新的请求，根据接口文档来绝对传什么参数，这里是传id和状态state
        await tagState(id, state)
        this.$message.success('操作成功')
      } catch (err) {
        console.log(err)
      }
    },