追问：select的change事件内容如何暴露到外部

Question

<template>
  <div>
    <el-row :gutter="20" class="header">
      <el-col :span="6">
        <el-select
          v-model="select"
          clearable
          placeholder="Select"
          @change="selectChange(select)"
        >
          <el-option value="Option1" label="Option1" />
          <el-option value="Option2" label="Option2" />
        </el-select>
      </el-col>
      <el-button type="primary" @click="initTable">生成表格</el-button>
    </el-row>
    <!-- 表格部分 -->
    <el-table
      :data="selectChange(select)"
      v-if="select"
      style="width: 100%"
      id="phon-table"
    >
      <el-table-column
        align="center"
        v-for="(item, index) in options"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const options = ref([
  { label: "title", prop: "title" },
  { label: "shanghai", prop: "shanghai" },
  { label: "beijing", prop: "beijing" },
  { label: "guangzhou", prop: "guangzhou" },
  { label: "shenzhen", prop: "shenzhen" },
  { label: "nanjing", prop: "nanjing" },
]);
//数据
const data1 = ref([
  {
    title: "足球人数",
    shanghai: 100,
    beijing: 200,
    guangzhou: 300,
    shenzhen: 400,
    nanjing: 500,
  },
]);
const data2 = ref([
  {
    title: "篮球人数",
    shanghai: 1000,
    beijing: 2000,
    guangzhou: 3000,
    shenzhen: 4000,
    nanjing: 5000,
  },
]);
const select = ref(null);
let dataArr = [];
const selectChange = (select) => {
  // console.log(select);
  if (select === "Option1") {
    dataArr = data1.value;
    console.log(dataArr);
  } else if (select === "Option2") {
    dataArr = data2.value;
    console.log(dataArr);
  }
  return dataArr;
};

onMounted(() => {
  //不能调用，得不到dataArr，报错dataArr未定义
  console.log(selectChange(select));
  console.log(dataArr)
});

//因为后续需要对dataArr进行自定义修改，放在onMounted钩子中也不起作用，产生了新的问题：如何在selectChange函数外部调用到dataArr? 求指教，谢谢！



</script>
<style></style>

Answer 1

修改注意点我加了注释-----------------------------------

<template>
  <div>
    <el-row :gutter="20" class="header">
      <el-col :span="6">
        <el-select
          v-model="select"
          clearable
          placeholder="Select"
          @change="selectChange(select)"
        >
          <el-option value="Option1" label="Option1" />
          <el-option value="Option2" label="Option2" />
        </el-select>
      </el-col>
      <el-button type="primary" @click="initTable">生成表格</el-button>
    </el-row>
    <!-- 表格部分 -->
    <el-table :data="dataArr" v-if="select" style="width: 100%" id="phon-table">
      <el-table-column
        align="center"
        v-for="(item, index) in options"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const options = ref([
  { label: "title", prop: "title" },
  { label: "shanghai", prop: "shanghai" },
  { label: "beijing", prop: "beijing" },
  { label: "guangzhou", prop: "guangzhou" },
  { label: "shenzhen", prop: "shenzhen" },
  { label: "nanjing", prop: "nanjing" },
]);
//数据
const data1 = ref([
  {
    title: "足球人数",
    shanghai: 100,
    beijing: 200,
    guangzhou: 300,
    shenzhen: 400,
    nanjing: 500,
  },
]);
const data2 = ref([
  {
    title: "篮球人数",
    shanghai: 1000,
    beijing: 2000,
    guangzhou: 3000,
    shenzhen: 4000,
    nanjing: 5000,
  },
]);
const select = ref(null);
let dataArr = ref([]); // 使用ref包裹---------------------------------------
const selectChange = (select) => {
  // console.log(select);
  if (select === "Option1") {
    dataArr = data1.value;
    console.log(dataArr);
  } else if (select === "Option2") {
    dataArr = data2.value;
    console.log(dataArr);
  }
  //   return dataArr; 去除-------------------------------
};

onMounted(() => {
  select.value = "Option1"; // 设置select初始值，默认选中Option1------------------------------------------

  selectChange(select) // 上方table组件绑定值变为dataArr--------------------------------
  console.log(dataArr);
});

//因为后续需要对dataArr进行自定义修改，放在onMounted钩子中也不起作用，产生了新的问题：如何在selectChange函数外部调用到dataArr? 求指教，谢谢！
</script>
<style></style>