文章目錄

• 概述
• 選擇器禁止選擇
• date-picker禁止選擇
• input禁止輸入

概述

我們這里組件庫使用的iview組件庫

需求是：特定環節，數據只能查看，不能修改。 （查看頁面和新增復用的同一個子組件）。 因此需要動態判斷。

---

選擇器禁止選擇

選擇器:
http://v2.iviewui.com/components/select

查看官網正好這個符合我們的需求

看看官方給的demo

改造下：

通過綁定 v-bind

https://cn.vuejs.org/v2/api/#v-bind

關鍵代碼：

:disabled="!(flowInfoParam.taskdefname === 'sdsg')"

注意 ：不能省略

---

date-picker禁止選擇

官網：http://v2.iviewui.com/components/date-picker

那改造下：

:disabled="!(flowInfoParam.taskdefname === 'sdsg')":readonly="!(flowInfoParam.taskdefname === 'sdsg')"

---

input禁止輸入

官網：
http://v2.iviewui.com/components/input

改造下

<Input v-model="formValidate.comment" type="textarea" :rows="3" placeholder="Enter something..." :disabled="!(flowInfoParam.taskdefname === 'sdsg')"></Input>

總結

以上是生活随笔為你收集整理的Vue2.x-02根据条件动态设置下拉框、时间选择器、文本框是否可编辑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。