【第1节】ant design select下拉框获取value，label， key和自定义属性

概述

在常规的使用中，我们直接获取下拉框的值就可以满足基本的业务，对于复杂的业务除了获取值外，还要获取label和自定义值，今天小编根据项目中实际情况做了总结，希望对你有有帮助。

常规使用

<template>
<a-select  
      defaultValue="--请选择--" 
      @change="handleDescCate" 
      :style="{width: '100px', marginLeft: '5px',marginRight: '15px'}">
          <a-select-option v-for="item in descCateList" 
          		:value="item.cateId" 
          		:key="item.descCateCode">
          		{{ item.cateName }}
         </a-select-option>
  </a-select>
  </template>
  <script>
  export default {
  name: '',
  components: {},
  data() {
    return {
      descCateList: []
     }
   },
    methods: {
      handleDescCate(value) {
        console.log('直接获取value值', value)
      }
    }
 }
  </<script>

获取label和value

方法1 添加 labelInValue属性

在select中添加labelInValue属性,此时@change返回的为一个对象，包含{key: '',lable: ''}两个属性,key代表的是value值，label是标签。

<template>
<a-select  
      labelInValue
      defaultValue="--请选择--" 
      v-decorator="[
            'descCate',
            {rules: [{ required: true, message: '请选择分类' }]}
          ]"
          placeholder="请选择分类"
      @change="handleDescCate" 
      :style="{width: '100px', marginLeft: '5px',marginRight: '15px'}">
          <a-select-option v-for="item in descCateList" 
          		:value="item.cateId" 
          		:key="item.descCateCode">
          		{{ item.cateName }}
         </a-select-option>
  </a-select>
  </template>
  <script>
  export default {
  name: '',
  components: {},
  data() {
    return {
      descCateList: []
     }
   },
    methods: {
      handleDescCate(item) {
        console.log('直接获取value值', item.key)
         console.log('直接获取label值', item.label)
      }
    }
 }
  </<script>

方法2 对象获取

<template>
<a-select  
      defaultValue="--请选择--" 
      @change="handleDescCate" 
      :style="{width: '100px', marginLeft: '5px',marginRight: '15px'}">
          <a-select-option v-for="item in descCateList" 
          		:value="item.cateId" 
          		:key="item.descCateCode">
          		{{ item.cateName }}
         </a-select-option>
  </a-select>
  </template>
  <script>
  export default {
  name: '',
  components: {},
  data() {
    return {
      descCateList: []
     }
   },
    methods: {
      handleDescCate(value， e) {
        const label  = e.componentOptions.children[0].elm.data.trim()
        console.log('直接获取value值', value)
         console.log('直接获取label值', label)
      }
    }
 }
  </<script>

获取自定义属性

<template>
<a-select  
      defaultValue="--请选择--" 
      @change="handleDescCate" 
      :style="{width: '100px', marginLeft: '5px',marginRight: '15px'}">
          <a-select-option v-for="item in descCateList" 
                :data-custom="item.descCateCode"
          		:value="item.cateId" 
          		:key="item.descCateCode">
          		{{ item.cateName }}
         </a-select-option>
  </a-select>
  </template>
  <script>
  export default {
  name: '',
  components: {},
  data() {
    return {
      descCateList: []
     }
   },
    methods: {
      handleDescCate(value， e) {
        let id = e.data.attrs["data-custom"]; //获取属性值
        const label  = e.componentOptions.children[0].elm.data.trim()
        console.log('直接获取value值', value)
         console.log('直接获取label值', label)
      }
    }
 }
  </<script>

获取自定义属性、label和value

<template>
<a-select  
      labelInValue
      defaultValue="--请选择--" 
      v-decorator="[
            'descCate',
            {rules: [{ required: true, message: '请选择分类' }]}
          ]"
          placeholder="请选择分类"
      @change="handleDescCate" 
      :style="{width: '100px', marginLeft: '5px',marginRight: '15px'}">
          <a-select-option v-for="item in descCateList" 
                :data-custom="item.descCateCode"
          		:value="item.cateId" 
          		:key="item.descCateCode">
          		{{ item.cateName }}
         </a-select-option>
  </a-select>
  </template>
  <script>
  export default {
  name: '',
  components: {},
  data() {
    return {
      descCateList: []
     }
   },
    methods: {
      handleDescCate(item，e) {
        console.log('直接获取value值', item.key)
        console.log('直接获取label值', item.label)
         let id = e.data.attrs["data-custom"]; //获取属性值
      }
    }
 }
  </<script>
  

关注我们

关注我，一个只讲解决方案的技术业务博主！！！