el-form-item vue 只读

在Vue的Element UI库中，`el-form-item`是一个用于组织表单输入项的基本组件。如果你想让某个表单项处于只读状态，可以在`el-form-item`上添加` :readonly="true"`属性。例如：

<template>
  <el-form>
    <el-form-item label="姓名" prop="name">
      <el-input v-model="name" readonly></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      name: '张三',
    };
  },
};
</script>

在这个例子中，`name`字段的值会被绑定到`el-input`控件，并且显示为只读状态。用户无法修改其内容。

相关问题

<el-col :span="12"> <el-form-item class="select" v-if="type!='info'" label="状态" prop="isdone"> <el-select v-model="ruleForm.isdone" placeholder="请选择状态"> <el-option v-for="(item,index) in isdoneOptions" v-bind:key="index" :label="item" :value="item"> </el-option> </el-select> </el-form-item> <div v-else> <el-form-item class="input" label="状态" prop="isdone"> <el-input v-model="ruleForm.isdone" placeholder="状态" readonly></el-input> </el-form-item> </div> </el-col>

这是一个使用 Element UI 组件库的 Vue.js 组件代码，用于生成一个表单项。其中，`el-col` 表示一个 Element UI 组件，用于布局；`:span="12"` 表示该组件占据 12 格的宽度；`el-form-item` 表示 Element UI 表单项组件；`v-if="type!='info'"` 表示如果 `type` 不等于 `'info'`，则渲染该组件；`label="状态"` 表示该表单项的标签为“状态”；`prop="isdone"` 表示该表单项的属性名称为“isdone”；`el-select` 表示 Element UI 的下拉框组件；`v-model="ruleForm.isdone"` 表示该下拉框的选中值绑定到 `ruleForm.isdone` 这个 Vue 实例的属性上；`v-for="(item,index) in isdoneOptions"` 表示使用 Vue.js 的 `v-for` 指令循环遍历 `isdoneOptions` 数组的每个元素，生成一个 `el-option` 元素；`:label="item"` 表示 `item` 作为下拉框选项显示的文本；`:value="item"` 表示 `item` 作为下拉框选项的值；`v-else` 表示如果 `type` 等于 `'info'`，则渲染下面的 `div` 元素；`el-input` 表示 Element UI 的输入框组件；`readonly` 表示该输入框为只读模式。

<el-col :span="6"> <el-form-item label="物料放置地点" prop="place"> <el-input v-if="!onlyRead" v-model="masterForm.place" show-word-limit type="textarea" placeholder="请输入物料放置地点" /> <span v-else class="lookItem">{{ masterForm.place }}</span> </el-form-item> </el-col>

这段代码是一个Vue组件的代码片段，用于渲染一个el-form-item元素，用于显示和编辑物料放置地点信息。在组件中，通过v-if指令和v-else指令来判断是否处于只读模式，根据不同的情况展示不同的内容。

如果只读模式为false，则展示一个el-input元素，用于编辑物料放置地点信息。v-model指令绑定了一个名为masterForm.place的数据，用于双向绑定用户输入的值。

如果只读模式为true，则展示一个span元素，并通过class绑定了一个名为lookItem的样式，用于展示物料放置地点信息。

在el-input元素中，还使用了show-word-limit属性来显示输入框的字数限制，并通过placeholder属性设置了一个占位文本，提醒用户输入物料放置地点。

该代码片段使用了Element UI库中的el-col、el-form-item和el-input组件来实现表单的布局和输入功能。