avue如何设置新增时可以操作,编辑时只读.置灰

可以通过在 Avue 的 form 表单中使用 v-if 和 v-bind:disabled 属性来实现新增时可以操作，编辑时只读置灰的效果。

具体实现方法如下：

1. 在 data 中定义一个变量 editFlag，用于控制表单元素的可编辑状态：

data() {
  return {
    editFlag: true,
    ...
  }
}

2. 在 form 表单元素中，使用 v-if 和 v-bind:disabled 属性来控制表单元素的可编辑状态：

<avue-form :model="formData">
  <avue-form-item label="姓名" prop="name"
    :editable="editFlag">
    <el-input v-model="formData.name"
      :disabled="!editFlag"></el-input>
  </avue-form-item>
  ...
</avue-form>

3. 在新增页面中，将 editFlag 设置为 true，可以进行编辑操作：

methods: {
  addData() {
    this.editFlag = true;
    // 清空表单数据
    ...
  }
}

4. 在编辑页面中，将 editFlag 设置为 false，只能查看数据：

methods: {
  editData() {
    this.editFlag = false;
  }
}

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