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>

 

最終，頁面顯示效果以下所示： 

 

從顯示樣式上簡單來看：

一、使用屬性 readonly="true" 方式，輸入框或文本域無灰色底；

二、使用屬性 :disabled="true" 方式，輸入框或文本域有灰色底。