VUE-004-禁止修改頁面顯示項,設置el-input,textarea只讀方法


在實際業務需求中,有些內容當初次創建后,即不可再次進行修改變更,因而需要顯示的文本內容不允許變更。此時,可通過頁面限制防止用戶修改。

方法:添加 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" 方式,輸入框或文本域有灰色底。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM