label-col与wrapper-col、vue页面监听、下拉框获取label

1、Ant 表单中label-col和wrapper-col

:label-col='{span:5, offset:1}' :wrapper-col='{span:18}'

意思如下：
总共： 5+1+18 = 24 份。
文字label部分占比 总共 6/24，宽度5，向右移动1.
input部分占比 18/24. 

2、vue监听

监听有路由监听、数据监听等

只要监听的数据改变就执行该数据的方法；

方法里：第一个参数是监听数据的最新的值，第二个参数是监听的数据的上一次的值；

注意：如果监听的是对象要加上deep：true深度监听属性

监听方法的完善：handler方法,里面有immediate和deep属性

handler方法里面有两个参数，和上面一样，第一个参数是新数据，第二个参数是上一次的数据；

immediate属性指的是是否先执行一次（true指的是监听的数据源还没有改变的时候先执行一次），deep是否深度监听

data() {
  return {
  vms: [],
  clusterId: '',
 }
},

 computed: {
    getClusterId() {
      return this.$store.getters.currentClusterValue;
    }
  },
  watch: {
    getClusterId: {
        //newV为改变后的值，oldV为改变前的值
      handler(newV,oldV) { 
        this.vms = [];
        this.clusterId = newV;
       // console.log('cluster',this.clusterId);
        //调接口请求数据
        getVmList({"clusterId":this.clusterId}).then( res => {
          if (res.data.data) {
              res.data.data.records.forEach((row) => {
              this.vms.push({'value': row.id,'label': row.vmName});
            });
          }
        });
       // this.$setOptionData(this.tableSearchData,'vmNode',this.vms);
      }
    }
  },

3、vue+element+select获取下拉框的label和value值

<template> 
<el-form-item label="节点" :prop="dataForm.form.vmNode" >     
        <el-select v-model="vmName" @change="getSelect">
          <el-option v-for="item in vms" :value="[item.value,item.label]" :label="item.label"></el-option>
        </el-select>
      </el-form-item>
</template>

data() {
    return {
vmId:'',
vmName:'',
    }
},
methods: {
  getSelect(e) {
       [this.vmId,this.vmName] = e;
     //  console.log('e',e)
    },

}

// :prop绑定表单字段,v-model="vmName" 绑定选中的值并显示在输入框中， @change传的值e为option中:value的值