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>


相关文章
|
JavaScript 索引
【vue】element ui 实现动态表单点击按钮新增行/删除行
【vue】element ui 实现动态表单点击按钮新增行/删除行
3168 0
|
2月前
elementui实现表格单选功能
elementui实现表格单选功能
12 0
|
9月前
|
JavaScript
Vue实现以按钮弹框动态控制Table列展示
点击设置弹出列数,并根据选择列进行展示:
109 0
|
6月前
|
JSON JavaScript 数据库
vue搜索表格功能,根据input输入框和下拉框传递的参数进行搜索
vue搜索表格功能,根据input输入框和下拉框传递的参数进行搜索
71 1
|
6月前
uniapp u-tabs表单如何默认选中
uniapp u-tabs表单如何默认选中
152 0
|
6月前
|
JavaScript
ElementUI下拉框选择后不显示值
ElementUI下拉框选择后不显示值
|
6月前
|
前端开发
uniapp checkbox样式失效,选中框选中按钮不显示
uniapp checkbox样式失效,选中框选中按钮不显示
85 0
|
10月前
|
JavaScript
vue 单选框默认选中
vue 单选框默认选中
146 0
|
JavaScript
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
1495 0
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行