动态显隐

根据一项的选择决定是否显示其他项

普通用法

动态显隐 - 图1

根据watch监听对象属性的去做逻辑,调用组件内部方法去findColumnIndex根据prop去寻找配置属性

  1. <avue-form :option="option" ref="form" v-model="form"></avue-form>
  2. <script>
  3. export default {
  4.   data(){
  5.     return {
  6.        form:{
  7.           text1:0,
  8.           text2:'文本2',
  9.        },
  10.        option:{
  11.           column: [{
  12.             label: '内容1',
  13.             prop: 'text1',
  14.             type:'radio',
  15.             dicData:[{
  16.               label:'隐藏',
  17.               value:0
  18.             },{
  19.               label:'显示',
  20.               value:1,
  21.             }]
  22.           },{
  23.             label: '内容2',
  24.             prop: 'text2',
  25.             display:true,
  26.           }]
  27.        }
  28.     }
  29.   },
  30.   watch:{
  31.     'form.text1'(){
  32.       const column =this.option.column[1];
  33.       if(this.form.text1===0){
  34.         column.display=true
  35.       }else{
  36.         column.display=false
  37.       }
  38.     }
  39.   }
  40. }
  41. </script>