avue操作栏自定义按钮怎么修改列表数据

Question

这是主页面 vue

js部分

api

需要达到效果是

启用和停用自定义按钮能够控制表格状态的启用和停用数据

Answer 1

下午好🌅🌅🌅
本答案参考ChatGPT-3.5

问题描述：

如何通过自定义按钮控制 avue 中的表格启用和停用数据？

解决方案：

1. 修改自定义按钮的点击事件：

<el-button icon="el-icon-close" size="size" type="type" @click="enstoped(scope.row, scope.index)"></el-button>

1. 在 methods 中添加 enstoped 方法：

enstoped(row, index) {
  let params = {
    id: row.id,
    status: row.status === 0 ? 1 : 0 // 根据当前状态判断是启用还是停用
  }
  this.$refs.crud.update(params, index); // 更新数据
}

1. 在 API 中添加 update 方法：

export function update(data) {
  return request({
    url: '/api/update',
    method: 'put',
    data
  })
}

1. 在 avue-crud 上添加 ref 属性和 v-on 属性：

<avue-crud ref="crud" v-bind="bindVal" v-on="{update: this.update}">

1. 在 methods 中添加 update 方法：

update(data, index) {
  let self = this;
  update(data).then(response => {
    let res = response.data;
    if (res.code === 200) {
      self.$message.success(res?.msg || '操作成功');
      self.$refs['table'].updateRow(index, data);
    } else {
      self.$message.error(res?.msg || '操作失败');
    }
  }).catch(() => {
    self.$message.error('操作失败');
  });
}

修改列表数据的过程就是这样，如果有相关代码可以进行更改。