关于avue的crud如何禁用表格行内编辑按钮?

221 阅读1分钟

1、在option中设置 editBtn: false,

2、在crud中设置插槽

```   <el-button
            :disabled="[9].includes(scope.row.status) ? true : false"
            type="text"
            size="small"
            icon="el-icon-delete"
            @click.stop="handleEdit(scope.row, scope.index)"
            >编辑
          </el-button>
 

3、在methods中写编辑的方法,重点就是利用this.$refs.crud.rowEdit(row, index);打开弹框

handleEdit(row, index) {
      this.$refs.crud.rowEdit(row, index);
    },
rowEdit(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          console.log(error);
        }
      );
    },

4、在crud中也要声明rowEdit方法

        :option="option"
        :table-loading="loading"
        :data="data"
        :page.sync="page"
        :permission="permissionList"
        :before-open="beforeOpen"
        v-model="form"
        ref="crud"
        @row-update="rowEdit"
  
      >

5、文档可见找了半天,在另一份文档中,找到了相关的代码:
文档地址:

www.bookstack.cn/read/avue-2…