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更新到最新版使用此方法 

 

posted @ 2021-09-15 13:28  许宝  阅读(2674)  评论(0编辑  收藏  举报