在實際業務需求中,有些內容當初次創建后,即不可再次進行修改變更,因而需要顯示的文本內容不允許變更。此時,可通過頁面限制防止用戶修改。
方法:添加 readonly="true" 或者 :disabled="true" 均可實現。代碼示例如下所示:
<el-form-item label="基准庫信息:" :label-width="formLabelWidth"> <el-input type="textarea" readonly="true" v-model="formData.benchmarkDetail" clearable placeholder="請輸入基准庫信息..."></el-input> </el-form-item> <el-form-item label="比對庫信息:" :label-width="formLabelWidth"> <el-input type="textarea" :disabled="true" v-model="formData.targetDetail" clearable placeholder="請輸入比對庫信息..."></el-input> </el-form-item>
最終,頁面顯示效果如下所示:
從顯示樣式上簡單來看:
1、使用屬性 readonly="true" 方式,輸入框或文本域無灰色底;
2、使用屬性 :disabled="true" 方式,輸入框或文本域有灰色底。