vue切换指标类型的时候，切换查询条件和结果

在Vue.js应用中，当你需要切换不同的数据指标类型时，通常会涉及到以下几个步骤：

1. **组件设计**：首先，你的页面上应该有一个切换按钮或者下拉菜单，用于让用户选择不同的指标类型。这可以通过`v-model`指令绑定到一个对象或变量上，例如`selectedIndicatorType`。

<template>
  <div>
    <select v-model="selectedIndicatorType">
      <option value="type1">指标类型1</option>
      <option value="type2">指标类型2</option>
      <!-- 添加更多选项 -->
    </select>
  </div>
</template>

2. **数据响应**：当用户选择新的指标类型，`selectedIndicatorType`的变化将触发视图更新。你应该监听这个变化，并基于新类型的值动态调整查询条件。

<script>
export default {
  data() {
    return {
      selectedIndicatorType: 'type1', // 初始值
      queryConditions: {}, // 查询条件对象，初始为空
      results: [] // 结果数组
    };
  },
  methods: {
    onIndicatorChange() {
      // 根据selectedIndicatorType更新queryConditions
      switch (this.selectedIndicatorType) {
        case 'type1':
          this.queryConditions = ...; // 设置针对类型1的查询条件
          break;
        case 'type2':
          this.queryConditions = ...; // 设置针对类型2的查询条件
          break;
        // 更多案例...
      }
      // 之后发送请求获取数据并更新results
      this.fetchData();
    },
    fetchData() {
      // 使用updated的queryConditions调用API获取数据
      axios.get('/api/data', { params: this.queryConditions })
        .then(response => (this.results = response.data));
    }
  },
  watch: {
    selectedIndicatorType(newVal) {
      this.onIndicatorChange();
    }
  }
};
</script>

3. **数据处理**：在`fetchData`函数中，根据当前的查询条件从服务器获取对应的数据，并填充到`results`数组中。

4. **界面显示**：最后，确保你的视图层能够展示根据不同指标类型返回的结果，可能是表格、图表或其他形式的可视化内容。