实现的效果：根据select选择框 选择不同的选项，展示不同的列，隐藏不需要的列。

 代码：

option: {
          height:'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          labelWidth:120,
          delBtn: false,
          column: [

                    {
                      label: "单位名称",
                      prop: "breedPlaceName"
                    }
                  ],
          group:[
                
{
              label: "展区",
              prop: 'jbxx2',
              icon: 'el-icon-edit-outline',
              column: [
                {
                  label: "壕沟",
                  prop: "isTrench",
                  type: "switch",
                  align: "center",
                  span: 24,
                  width: 80,
                  dicData: [
                    {
                      label: "不使用",
                      value: 1
                    },
                    {
                      label: "使用",
                      value: 0
                    }
                  ],
                  value: 0
                },
                 {
                  label: "壕沟深度(m)",
                  prop: "trenchDepth",
                  display: true, //是否展示，这个属性必填 没初始化不能动态显隐
                  hide: true,
                  rules: [{
                    required: true,
                    message: "请输入壕沟深度",
                    trigger: "blur"
                  },
                    {pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,     
                       message: '请输入大于0的数字,保留小数后两位', trigger: 'blur'}
                  ]
                },
                {
                  label: "壕沟宽度(m)",
                  prop: "trenchWidth",
                  display: true,
                  hide: true,
                  rules: [{
                    required: true,
                    message: "请输入壕沟宽度",
                    trigger: "blur"
                  },
                    {pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, 
                       message: '请输入大于0的数字,保留小数后两位', trigger: 'blur'}
                  ]
                },
    ]

根据select选择的值，控制列的显隐

使用监听，控制上面的option字段的显隐

watch: {
     'form.isTrench':{//获取form中select选择的值
            handler(val) {
              var trenchType = this.findObject(this.option.group, 'trenchType') //根据字段名获取到这一列
              var trenchDepth = this.findObject(this.option.group, 'trenchDepth')
              var trenchWidth = this.findObject(this.option.group, 'trenchWidth')
              var waterDepth = this.findObject(this.option.group, 'waterDepth')
              //0展示1不展示
                  if(val == 0){
                    trenchType.display = true//根据select选择的值控制对应列的显隐
                    trenchDepth.display = true
                    trenchWidth.display = false
                    waterDepth.display = false
                  }else if (val == 1){
                    trenchType.display = false
                    trenchDepth.display = false
                    trenchWidth.display = true
                    waterDepth.display = true
          }
        }
      },

}

监听多个值变化

先用computed定义一个tagDataLengthAndEditSymbol对象，然后再去watch 监听该对象。

data() {
 2   return {
 3     tagList: [],
 4     editSymbol: ''
 5   }
 6 },
 7 computed: {
 8   tagDataLengthAndEditSymbol(){
         let tagDataLength = this.tagList.length
         let editSymbol = this.editSymbol
         return {
             tagDataLength,
             editSymbol
         }
     }
15 },
16 watch: {
17   tagDataLengthAndEditSymbol(val){
18      console.log(val)
19 　}
20 }

打印结果

就可以根据监听到的值处理业务了 

​​​​​​​

如果对您有帮助，帮忙点赞关注哦，谢谢！