vue+elementUI中select怎么绑定对象

朱雀 2022-11-17 05:03 567阅读 0赞

### 写在前面 ###

> 最后还是忘记了，一个重要的点，以为写完了，都开始着手写react的教程了，好家伙，一个问题给我打回原形，粉丝们问发什么什么事了，原来是csdn博客里面的一个问题，我说select中绑定的值和你选择的值是一一对应的，你绑定了一个值就可以，对应的项element会直接帮你反显出来，这么是没有问题的，但是他满足不了很多的业务情况， 比如下面的例子！

#### 效果展示 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70]

#### 效果描述 ####

> 比如说我选择了一个中国，那么我希望的是拿到关于中国的所有的基本信息，名称，所属的大洲，人口等信息，那我们知道，一般情况下我们都是直接绑定一个值，要不就是绑定名称，要不就是大洲，要不就是人口，你现在全部都要，这可咋整， 不找着急，这篇文章就是为了解决这个问题，我们想如果我选择的时候绑定了当前被选择的对象不就好了嘛，查文档！  
> ![在这里插入图片描述][20210408140937858.png]

#### 代码 ####

<template>
      <div>
        <h3><span>国家:</span>{
       {country.name}}-<span>大洲:</span>{
       {country.continent}}-<span>人口:</span>{
       {country.population}}</h3>
        <br/>
        <el-select @change="currItem" v-model="country" value-key="id">
          <el-option value="" label="请选择" />
          <el-option v-for="item in countryLlist" :key="item.id" :label="item.name" :value="item">
          </el-option>
        </el-select>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            msg: "hello select",
            countryLlist: [{
              id:0,
              name: "中国",
              label: 'china',
              continent: "亚洲",
              population:"14亿（2019年）"
            }, {
              id:1,
              name: "美国",
              label: 'America',
              continent: "美洲",
               population:"3.32亿（2020年）"
            }, {
              id:2,
              name: "英国",
              label: 'England',
              continent: "欧洲",
               population:"6679.68万（2019年）"
            }],
            country: {}
          }
        },
        created() {
          //初始化默认对象
          this.country = {
            id:1,
            name: "美国",
            label: 'America',
            continent: "美洲",
          }
        },
        methods: {
          currItem() {
            console.log(this.country)
          }
        }
      }
    </script>
    <style>
    </style>

#### 注意的点⚠️ ####

> 1、我们需要绑定一个对象，也就是说，既然你选择的时候希望被选择的是整个对象，那么你初始化的时候return中的初始化的值就应该是一个对象，而不是一个string的字符串  
> 2、绑定以后对象中的对应的列可以完全和原数据对应，这是最好的，但是如果不对应也不是完全不可以，用不到的可以不对应的， 但是你的value-key一定要存在且对应，不然数据就没办法反显！  
> 3、为了体现反显，我在数据加载的时候就直接给对象赋值了，所以你们打开以后看到的效果就是这样的，美国被选中，因为我初始化的就是美国 id是1的。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 1]  
> 4、是不是一定要用id呢，推荐这么用，但是你非要用别的也可以，但是要和对象中的数据对应就可以，比如你的value-key=“label” 那么你的label就一定要存在且对应！
> 
> > 以后还有什么问题的话，就私信问我就好了！看到了问题不大就回答了，问题比较频繁的就直接写一篇文章说明！收工

#### OVER - 收工 ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70]: /images/20221022/3c1a44bc7c0a4c098c0cf175281c89d2.png
[20210408140937858.png]: /images/20221022/23da17600a8a4a5aa8203c910e9eb5dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 1]: /images/20221022/91fda6d3e9a44f1c943deef4aa2d4432.png