axios默认是异步请求数据的，如果需要同步获取数据的话，需要进行设置。

下面的代码默认异步请求数据：

<template>
  <div>
    <el-tabs @tab-click="tabEvent">
      <el-tab-pane name="tab1">Tab1</el-tab-pane>
      <el-tab-pane name="tab2">Tab2</el-tab-pane>
      <el-tab-pane name="tab3">Tab3</el-tab-pane>
    </el-tabs>
    <el-table :data="tableData">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="type" label="类别"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "asyncAndAwait",
  data() {
    return {
      product_category: "",
      tableData: []
    };
  },
  methods: {
    tabEvent: function(tab, event) {
      var name = tab.name;
      if (name == "tab2") {
        this.getProductCategory();
        this.getProducts(this.product_category);
      }
    },
    //请求接口获取product_category
    getProductCategory: function() {
      var that = this;
      axios
        .get("xx/xxx/xxx")
        .then(function(response) {
          var data = response.data;
          if (data.status == 0) {
            that.product_category = data.data[0].product_category;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //根据请求到的product_category，获取具体数据
    getProducts: function(product_category) {
      var that = this;
      axios
        .post("xx/xxx/xxx?product_category=" + product_category)
        .then(function(response) {
          var data = response.data;
          if (data.status == 0) {
            that.tableData = data.tableData;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

在以上代码中，getProducts方法是需要根据getProductCategory方法返回的product_category获取数据的,但是由于两个方法是异步的，所以获取到的products的数据不是获取到的product_category类型的数据，因此需要将以上两个方法修改为同步，如下：

<template>
  <div>
    <el-tabs @tab-click="tabEvent">
      <el-tab-pane name="tab1">Tab1</el-tab-pane>
      <el-tab-pane name="tab2">Tab2</el-tab-pane>
      <el-tab-pane name="tab3">Tab3</el-tab-pane>
    </el-tabs>
    <el-table :data="tableData">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="type" label="类别"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "asyncAndAwait",
  data() {
    return {
      product_category: "",
      tableData: []
    };
  },
  methods: {
    //添加async和await方法变为同步
    tabEvent: async function(tab, event) {
      var name = tab.name;
      if (name == "tab2") {
        await this.getProductCategory();
        this.getProducts(this.product_category);
      }
    },
    //请求接口获取product_category，添加async和await方法变为同步
    getProductCategory: async function() {
      var that = this;
      await axios
        .get("xx/xxx/xxx")
        .then(function(response) {
          var data = response.data;
          if (data.status == 0) {
            that.product_category = data.data[0].product_category;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //根据请求到的product_category，获取具体数据
    getProducts: function(product_category) {
      var that = this;
      axios
        .post("xx/xxx/xxx?product_category=" + product_category)
        .then(function(response) {
          var data = response.data;
          if (data.status == 0) {
            that.tableData = data.tableData;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

在tabEvent和getProductCategory方法中添加上async和await即可使getProductCategory获取到product_category之后再运行getProducts，获取到的数据就是product_category类型的数据