Vue2.x-02根據條件動態設定下拉框、時間選擇器、文字框是否可編輯

阿新 • • 發佈：2018-12-16

文章目錄

概述
選擇器禁止選擇
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根據條件動態設定下拉框、時間選擇器、文字框是否可編輯

文章目錄概述選擇器禁止選擇 date-picker禁止選擇 input禁止輸入概述我們這裡元件庫使用的iview元件庫需求是：特定環節，資料只能檢視，不能修改。（檢視頁面和新增複用的同一個子元件）。因此

通過jquery動態設定下拉框select的選中值option

雖然簡單，但是用得比較少，自己按照select的選中原理，直接擼出來，然後做出跟百度出來的結果對比了一下，發現百度出來的東西太繁瑣了，效果實現了，但是本著程式碼要簡潔的心，我還是用了自己的方法，記錄一下結構如下：<select> <option cla

select動態新增option與動態設定下拉框預設選項（selected）的問題(原創)

//動態生成下拉框$.ajax({ type:"GET", async:false, //設為同步請求（非同步載入的話後面的遍歷方法獲取不到option） url:context+"/service/demo/hfjd/findJdmc",//獲取

mui做的上拉重新整理和下拉載入和日期選擇器

var pageCount = 1;//頁碼 var date_inputs = document.getElementsByClassName('select_date'); var today = new Date(); var thisyear = today.getF

Easyui Datagrid 的Combobox 如何動態修改下拉選項，以及值的轉換

options 解釋 logs sel onclick med rsize rip 原因我是先將下拉選項的值通過datagrid的url查出來了，在每一行的row中 //項目結果選項卡的列表 $(‘#project_table‘).datagrid({

設定下拉框中的選中項

點選設定按鈕下拉框隨機選中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

jquery設定下拉框的值

程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script s

bootstrap怎麼設定下拉選單不點選，改成滑鼠懸停直接顯示下拉選單

方法一：實際上比較簡單，只需要加一個css設定下hover的狀態，把下拉選單設定成block，具體css：.nav > li:hover .dropdown-menu {display: block;} 但是主導航失去連結的效

Angularjs 關於Angularjs的ng-options設定下拉框的value的值

<div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="item.id as item.name for item in names"> //ite

layui之動態新增下拉選單

轉：https://blog.csdn.net/Code_shadow/article/details/80431937 (不顯示一定要先把select標籤寫上，不能標籤也動態生成，那樣會不顯示 ) //html <select id="selectID"></sel

QComboBox設定下拉框的高度和文字大小，和本身的寬度和大小

設定QComboBox的預設model為QAbstractItemDelegate，但不幸的的是QComboBox的Item並不繼承自QStyedItemDeletegate而是繼承自QItemDelegate。如果要設定QComboBox的行高，使用Qss的方式 QComboBox QAbstract

java操作poi生成excel.xlsx（設定下拉框）下載本地和前端下載

需求：匯入excel表格，如果excel有錯誤，將錯誤的地方標紅，在把資料以excel的形式寫出，供使用者下載解決方案：1.以實體類的方式接收excel並解析（建立兩個集合一個接收正常的資料一個接收錯誤的資料） 2.錯誤集合無論正確錯誤資料都要儲存，並記錄是否有誤（錯誤資料

C# 動態顯示下拉列表的資料

public List<UserInfo> list = new List<UserInfo>(); //查詢採購員 SqlConnection conn = new SqlConnection("Server=.;Database=JiYunMaterials

QT comboBox設定下拉選單（）

設定combobox的item方法有兩種方法一：適合有規律的，可利用for迴圈減少程式碼量，當然也可以一個一個插入方法二：適合無規律的程式碼如下 //方法一： for (int i

vue 設定下拉框三級聯動

如圖中，用vue實現三個選擇框是聯動關係，首先選擇廠商，然後品牌下拉框中出現的品牌是所選廠商包含的品牌，同理，選擇完品牌後，車型也是所選品牌中包含的車型。例如有這樣的對應關係：廠商品牌車型長城哈弗 HB01 HB02 HB0

vue.js 新增動態的下拉框，單選框，多選框

1.下拉框 <FormItem label="關聯題目型別" prop="questionTypeId"> <Select v-model="addValidate.questionTypeId" placeholder="請選擇題目型

vue元件-動態搜尋下拉框元件

元件dropdown.vue程式碼如下： <template> <div class="vue-dropdown default-theme"> <div class="search-module clearfix"&g

jQuery動態新增下拉列表選項

不說了，直接上程式碼： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String

Ajax動態為下拉列表新增資料

1. 前臺jsp，新建一個下拉控制元件 <select id="seldvd" onChange="sel_onchange(this)"></select> 2. js部分，建一個function方法，利用ajax，指向 'get

CSS設定下拉選單

Vue2.x-02根據條件動態設定下拉框、時間選擇器、文字框是否可編輯

文章目錄

概述

選擇器禁止選擇

date-picker禁止選擇

input禁止輸入

相關推薦