下拉框搜索页面

下拉框可以选择使用element-ui的el-select标签

页面内容：

    <el-row>
<!--使用栅格用来将两个下拉框布局-->
        <el-col :span="10" class="c-size">
        <el-select
            class="f-size"
            v-model="safety.placeName"
            placeholder="分站"
            size="medium"
            value-key="placeName"
            @change="substation"
        >
<!--使用el-select标签做下拉框，其中双向绑定safety数据中的placeName属性，设置默认名为“分站”，下拉框的宽度为medium(中号)，value-key是数据的唯一标识，应该用谁搜索就选择谁，所以使用placeName属性，substation点击函数-->
          <el-option
              v-for="(item, index) in safety"
              :key="index"
              :label="item.placeName"
              :value="item"
          ></el-option>
<!--el-option展示数据，v-for遍历safety的数据并且定义给item，双向绑定的key值不知道怎么解释，label就是展示出的placeName的值-->
        </el-select>

      </el-col>
      <el-col :span="10" class="c-size">
        <el-select
            class="f-size"
            v-model="safety.simulatePlace"
            placeholder="传感器"
            size="medium"
            value-key="simulatePlace"
            @change="sensor"
        >
          <el-option
              v-for="(item, index) in safety"
              :key="index"
              :label="item.simulatePlace"
              :value="item"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="2" class="c-size">
        <el-button @click="refresh" icon="el-icon-refresh" style="margin-top: 5px;background-color: rgba(25,25,36,0)"></el-button>
<!--刷新按钮-->
      </el-col>
    </el-row>

数据：

export default {
  name: "safety",
  data() {
    return {
      safety:[{
        testNumber:"",
        placeName:"",
        simulatePlace:"",
        simValue: "",
      }]
    }
  },
  methods: {
    <!--刷新的方法就是直接重新请求一遍后台传两个空值-->
    refresh() {
      this.getData(null,null)
    },
    sensor(command){
      const placeNameN = command.placeName
      const simulatePlace = command.simulatePlace
      this.getData(null,simulatePlace)
    },
    substation(command) {
      const placeNameN = command.placeName
      const simulatePlace = command.simulatePlace;
      this.getData(placeNameN,null);
    },
    getData(placeName,simulatePlace) {
      <!--因为后台接收的是个json所以设了个变量，可能有更简单的方法-->
      const data = {
        placeName:placeName,
        simulatePlace:simulatePlace
      }
      <!--ajax请求后台接口-->
      getSafety(data).then(res => {
          this.safety = res.data;
      }
  },
}