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" 方式，輸入框或文本域有灰色底。