Vue2.x-02根据条件动态设置下拉框、时间选择器、文本框是否可编辑

简介: Vue2.x-02根据条件动态设置下拉框、时间选择器、文本框是否可编辑

概述


2018121221312572.png

我们这里组件库使用的iview组件库

需求是:特定环节,数据只能查看,不能修改。 (查看页面和新增复用的同一个子组件)。 因此需要动态判断。


选择器禁止选择


选择器:

http://v2.iviewui.com/components/select

查看官网正好这个符合我们的需求


20181212214716258.png


看看官方给的demo


20181212214753480.png


改造下:

通过绑定 v-bind

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


20181212214933592.png


20181212215115672.png


关键代码:

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



注意 :不能省略


date-picker禁止选择

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

20181212215417503.png


那改造下:

20181212215310998.png

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

input禁止输入

官网:

http://v2.iviewui.com/components/input


20181212215541930.png



改造下

20181212215616775.png

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


相关文章
|
5月前
Vue3选择框选择不同的值输入框刷新变化
Vue3选择框选择不同的值输入框刷新变化
130 5
|
5月前
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
151 0
|
6月前
|
JavaScript
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
334 1
|
6月前
|
JavaScript
vue 指定区域可拖拽的限定拖拽区域的div(如仅弹窗标题可拖拽的弹窗)
vue 指定区域可拖拽的限定拖拽区域的div(如仅弹窗标题可拖拽的弹窗)
238 0
|
6月前
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
574 0
|
JavaScript
Vue实现以按钮弹框动态控制Table列展示
点击设置弹出列数,并根据选择列进行展示:
208 0
|
JavaScript
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
1736 0
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
|
JavaScript
ElementUI下拉框选择后不显示值
ElementUI下拉框选择后不显示值
251 0
|
前端开发
uniapp checkbox样式失效,选中框选中按钮不显示
uniapp checkbox样式失效,选中框选中按钮不显示
351 0