需求:
一个select选择框,选择数据变化,控制其他输入框的显隐,是否可输入控制
avue 实现
动态控制 显隐,可操作性,实现方案:
1.change事件
2.watch 侦听器
display
主要注意属性display 为true 展示 为false 隐藏
{
display:false,
search:true,
label: "所属机构",
prop: "ssjgid",
type: "tree",
multiple: false,
dicData: [],
props: {
label: "title"
},
checkStrictly: true,
slot: true,
rules: [{
required: true,
message: "请选择所属机构",
trigger: "click"
}]
},
watch: {
'form.gllx'(val) {
let ssjgid =this.findObject(this.option.column,'ssjgid');
let gllxbm =this.findObject(this.option.column,'gllxbm');
if(val == 1){
ssjgid.display = false;
gllxbm.display = true;
}else if(val == 2){
ssjgid.display = true;
gllxbm.display = false;
}
},
},
disable
主要注意属性 disabled 为true不能操作,为false可以进行操作
{
labelWidth:120,
label: "单品",
prop: "dppsf",
rules: [{
required: true,
message: "请输入",
trigger: "blur"
}],
formatter:function(row,value){
return value/100;
},
disabled:false,
},
我测试的时候有个小bug disabled 必须要有值。
watch: {
'form.jglx'(val) {
let spdj =this.findObject(this.option.column,'spdj');
if(val == 0){
spdj.disabled = true;
dpzj.disabled = false;
dppsf.disabled = false;
}else if(val == 1){
spdj.disabled = true;
dpzj.disabled = true;
dppsf.disabled = true;
}else if(val == 2){
spdj.disabled = false;
dpzj.disabled = false;
dppsf.disabled = false;
}
},
change事件实现类似:
column: [{
label: '姓名',
prop: 'name',
change: ({value,column}) => {
this.$message.success('查看控制台',value,column)
console.log('值改变')
}