vue+element，让下拉框选择渲染数据变得更加简单

前言

vue 作为一款优秀的前端框架，被越来越多的开发者所熟知和应用。而基于 element 实现根据下拉框选择渲染不同数据的功能，更是 vue 框架的一个重要应用场景。本文将带您深入了解这一功能的实现原理和代码实现，让你在开发过程中能够更加得心应手，同时也能够为更多的开发者提供帮助和借鉴。

---

需求

后台只提供一个接口，其中包含下拉框的数据和列表的数据，要求实现根据下拉框的选择渲染不同的列表数据。

---

实现效果：

---

实现思路

1. 既然是同一个接口，那么下拉框的数据就是从 list 中拿取其中的某些字段，我们需要做的是将返回的 list 循环遍历取其值将其 return 出去赋值给下拉框的数组；
2. 第一次进入页面的时候可以给它一个默认展示的列表数据和下拉框中的默认赋值；
3. 下拉框绑定 change 事件，当我们选择某一项时，循环遍历初始的 list 数组，判断我们选中项的 value 与遍历 list 数组中拿取的那个字段是否相等，若相等，将 list 数据动态赋值给列表绑定的对象。

---

话不多说，下面直接看代码实例

---

完整源码

html

<template>
  <div class="outerBox">
    <el-card class="box-card">
      <div class="selectBox">
        <div>编号：</div>
        <el-select v-model="dzbhModel" @change="choiceOn">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="descriptionsBox">
        <el-descriptions class="margin-top" :column="1" size="medium" border>
          <el-descriptions-item>
            <template slot="label">名称</template>
            <span>{{particularsDAta.name}}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">编号</template>
            <span>{{particularsDAta.dzbh}}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">经度</template>
            <span>{{particularsDAta.latitude}}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">维度</template>
            <span>{{particularsDAta.longitude}}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">质量</template>
            <span>{{particularsDAta.jgds}}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
  </div>
</template>

js

<script>
export default {
  data() {
    return {
      // 模拟数据
      dataList: [
        {
          name: "测试一",
          dzbh: "01202205",
          latitude: "142.84",
          longitude: "23.745",
          jgds: "178575.32",
        },
        {
          name: "测试二",
          dzbh: "01202206",
          latitude: "125.326",
          longitude: "33.56",
          jgds: "412412.25",
        },
        {
          name: "测试三",
          dzbh: "01202207",
          latitude: "132.454",
          longitude: "26.74",
          jgds: "421535.98",
        },
      ],
      dzbhModel: "", //下拉框绑定的model
      options: [], //下拉框数据
      particularsDAta: {}, //展示的数据
    };
  },
  mounted() {
    this.portData(); //模拟调用接口
  },
  methods: {
    // change事件匹配对应数据
    choiceOn(value) {
      let idx = "";
      this.dataList.map((item, index) => {
        if (item.dzbh == value) {
          idx = index;
        }
      });
      this.particularsDAta = this.dataList[idx];
    },
    // 模拟接口
    portData() {
      // 循环取下拉框的数据
      this.options = this.dataList.map((item) => {
        return { value: item.dzbh, label: item.dzbh };
      });
      // 默认展示数据和下拉框中的默认赋值
      this.particularsDAta = this.dataList[0];
      this.dzbhModel = this.dataList[0].dzbh;
    },
  },
};
</script>

style

<style scoped>
.outerBox {
  width: 30%;
}
.selectBox {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.selectBox div:first-child {
  font-weight: bold;
}
::v-deep .el-descriptions--medium.is-bordered .el-descriptions-item__cell {
  width: 50%;
  text-align: center;
}
</style>