AVUE 监听FORM某一字段值来进行动态显隐

时间:2021-09-15
本文章向大家介绍AVUE 监听FORM某一字段值来进行动态显隐,主要包括AVUE 监听FORM某一字段值来进行动态显隐使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

废话不多说直接上代码

<avue-form :option="option" ref="form" v-model="form"></avue-form>
<script>
export default {
  data(){
    return {
       form:{
          text1:0,
       },
       option:{
          column: [{
            label: '内容1',
            prop: 'text1',
            type:'radio',
            dicData:[{
              label:'隐藏',
              value:0
            },{
              label:'显示',
              value:1,
            }]
          },{
            label: '内容2',
            prop: 'text2',
            display:true,
            rules: [],
          }]
       }
    }
  },
  watch:{
    'form.text1':{
      handler(val){
        var text2 =this.findObject(this.option.column,'text2')
        if(val===0){
          text2.display=true
          text2.rules=[{
            required: true,
            message: "请输入内容2",
            trigger: "blur"
          }]
        }else{
          text2.display=false
          text2.rules=[]
        }
      },
      immediate: true
    },
  }
}
</script>

avue更新到最新版使用此方法 

原文地址:https://www.cnblogs.com/xubao/p/15271848.html