vue+elementUI中select怎么绑定对象

何处锦绣不灰堆

发布于 2021-04-09 16:55:42

2.2K0

发布于 2021-04-09 16:55:42

写在前面

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

效果展示

效果描述

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

代码

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