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

水深无声 2023-09-27 11:58 118阅读 0赞

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的值