avue-crud中form表单如何设置新增时可以操作,编辑时只读.置灰

在 avue-crud 中，可以通过 `:disabled` 属性来设置表单项的禁用状态。为了实现新增时可操作但编辑时只读置灰，可以在新增时将 `:disabled` 属性设置为 `false`，而在编辑时将其设置为 `true`。

具体操作如下：

1. 在 `crudConfig` 中设置表单项的 `:disabled` 初始值为 `false`。

crudConfig: {
  formOptions: {
    disabled: false,
    form: [
      {
        label: '姓名',
        prop: 'name',
        type: 'input',
        disabled: false // 初始值为 false
      },
      // 其他表单项
    ]
  }
}

2. 在 `crud` 组件的 `@dialog-open` 事件中，将表单项的 `:disabled` 属性设置为 `false`。

<avue-crud
  :crud-config="crudConfig"
  @dialog-open="handleDialogOpen"
  // 其他属性
/>

...

methods: {
  handleDialogOpen(type, data) {
    if (type === 'add') {
      this.crudConfig.formOptions.disabled = false; // 新增时设置为可操作
    } else if (type === 'edit') {
      this.crudConfig.formOptions.disabled = true; // 编辑时设置为只读置灰
    }
  }
  // 其他方法
}

3. 在表单项的 `:disabled` 属性中绑定 `crudConfig.formOptions.disabled`。

crudConfig: {
  formOptions: {
    disabled: false,
    form: [
      {
        label: '姓名',
        prop: 'name',
        type: 'input',
        :disabled="crudConfig.formOptions.disabled" // 绑定 disabled 属性
      },
      // 其他表单项
    ]
  }
}

这样，就可以实现新增时可操作但编辑时只读置灰的效果了。