vue.js - 在vue中如何把el-dialog中表单里的内容置灰设置只读不可修改？

Question

请问在vue中如何把el-dialog中表单里的内容置灰设置只读不可修改

复制了一个dialog设置，但没反应。

Answer 1

给 el-dialog 设置肯定没作用啊。你得把你 props 下来的 disabled 属性赋值给 el-form 的 disabled 属性上。

举个例子：

<el-dialog title="提示" :visible.sync="dialogVisible">
  <el-form label-width="80px" :model="formData" :disabled="disabled">
    <el-form-item label="名称">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-input v-model="formData.region"></el-input>
    </el-form-item>
    <el-form-item label="活动形式">
      <el-input v-model="formData.type"></el-input>
    </el-form-item>
  </el-form>
</el-dialog>

export default {
  props: ['disabled'],
  data(){
    return {
      formData:{},
      dialogVisible: false,
    }
  }
}

或者你更加直接一点，本来就是一个只读的表单，那么把 v-model 改成 v-bind 就行了。

- <el-input v-model="formData.name"></el-input>
+ <el-input :value="formData.name"></el-input>