根据select的选项生成对应的表格

Question

非常感谢帮助，尤其是 呐啦 详细的脚本，能解决问题。因为实际项目中的数据源涉及到几十项，多组件虽然是一种好的选择，但还是想在一个组件下完成，通过条件筛选，动态地根据select的option值生成对应的表格。对原来的问题做了一点修改，加入了表格DOM， 问题是如何动态绑定table中的data值呢? 期待指教！

<template>
  <div>
    <el-row :gutter="20" class="header">
      <el-col :span="6">
        <el-select
          v-model="select"
          clearable
          placeholder="Select"
          @change="selectChange"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-button type="primary" @click="initTable">生成表格</el-button>
    </el-row>
    <!-- 表格部分 -->
    <el-table :data="dataArr" style="width: 100%" id="phon-table">
      <el-table-column
        align="center"
        v-for="(item, index) in options2"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { ref } from "vue";
//select
const select = ref("");
const options = ref([
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
]);
const options2 = 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 = [
  {
    title: "足球人数",
    shanghai: 100,
    beijing: 200,
    guangzhou: 300,
    shenzhen: 400,
    nanjing: 500,
  },
];
const data2 = [
  {
    title: "篮球人数",
    shanghai: 1000,
    beijing: 2000,
    guangzhou: 3000,
    shenzhen: 4000,
    nanjing: 5000,
  },
];
//拟想实现： 根据select的option选项，页面动态生成相应的表格。具体是：
// 1. 当select 为option1时， 生成以data1为数据的表格，表格字段名分为对应data1中的6个属性名，字段值为对应值
// 2. 当select 为option2时， 生成以data2为数据的表格，表格字段名分为对应data2中的6个属性名，字段值为对应值

const selectChange = (data) => {
  console.log(data.label);
//.......
 
  }
};

const initTable = () => {}

</script>
<style></style>

Answer 1

<!-- index -->
 <template>
    <lay-panel>
        <lay-select v-model="opt_value">
            <lay-select-option value="option1" label="option1"></lay-select-option>
            <lay-select-option value="option2" label="option2"></lay-select-option>
        </lay-select>
        <lay-panel>
            <Option1 v-if="opt_value == 'option1'"></Option1>
            <Option2 v-if="opt_value == 'option2'"></Option2>
        </lay-panel>
    </lay-panel>
</template>

<script>
    import {
        defineComponent,
        ref
    } from 'vue'
    import Option1 from './option1.vue'
    import Option2 from './option2.vue'
    export default defineComponent({
        components: {Option1,Option2},
        name: 'index',
        setup() {
            const opt_value = ref(null)
            return {
                opt_value
            }
        }
    })
</script>

<style scoped>
    .container {
        padding: 20px;
        font-size: 14px;
        line-height: 24px;
    }
</style>

<template>
    <lay-table :columns="columns1" :dataSource="dataSource1"></lay-table>
</template>

<script>
    import {
        defineComponent,
        ref
    } from 'vue'
    export default defineComponent({
        name: 'option1',
        setup() {
            const columns1 = [{
                title: "足球人数",
                width: "200px",
                key: "football_nums"
            }, {
                title: "上海",
                width: "180px",
                key: "shanghai"
            }, {
                title: "北京",
                width: "180px",
                key: "beijing"
            }, {
                title: "广州",
                width: "180px",
                key: "guangzhou"
            }, {
                title: "深圳",
                width: "180px",
                key: "shenzhen"
            }, {
                title: "南京",
                width: "180px",
                key: "nanjing",
                ellipsisTooltip: true,
            }]

            const dataSource1 = [{
                football_nums: 100,
                shanghai: 200,
                beijing: 300,
                guangzhou: 400,
                shenzhen: 500,
                nanjing: 600
            }]

            return {
                columns1,
                dataSource1
            }
        }
    })
</script>

<style scoped>
    .container {
        padding: 20px;
        font-size: 14px;
        line-height: 24px;
    }
</style>

<template>
    <lay-table :columns="columns21" :dataSource="dataSource21"></lay-table>
</template>

<script>
    import {
        defineComponent,
        ref
    } from 'vue'
    export default defineComponent({
        name: 'option2',
        setup() {
            const columns21 = [{
                title: "篮球人数",
                width: "200px",
                key: "basketball_nums"
            }, {
                title: "上海",
                width: "180px",
                key: "shanghai"
            }, {
                title: "北京",
                width: "180px",
                key: "beijing"
            }, {
                title: "广州",
                width: "180px",
                key: "guangzhou"
            }, {
                title: "深圳",
                width: "180px",
                key: "shenzhen"
            }, {
                title: "南京",
                width: "180px",
                key: "nanjing",
                ellipsisTooltip: true,
            }]

            const dataSource21 = [{
                basketball_nums: 100,
                shanghai: 200,
                beijing: 300,
                guangzhou: 400,
                shenzhen: 500,
                nanjing: 600
            }]

            return {
                columns21,
                dataSource21
            }
        }
    })
</script>

<style scoped>
    .container {
        padding: 20px;
        font-size: 14px;
        line-height: 24px;
    }
</style>

把涉及到的值改成你自己的就可以了，表格值这种动态的，记得定义的时候用ref定义，否则不能动态改变