非常感谢帮助，尤其是 呐啦 详细的脚本，能解决问题。因为实际项目中的数据源涉及到几十项，多组件虽然是一种好的选择，但还是想在一个组件下完成，通过条件筛选，动态地根据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>
<!-- 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定义，否则不能动态改变
定义一个data，判断value值，根据选项值给data赋相对应的数据
1.渲染两个table,使用v-if="根据select的value值"判断渲染哪个
2.渲染一个table，table的props和columns需要根据select的value值判断
columns(){
return isA ? aColumns :bColumns
}
tableProps(){
return isA ? aTableProps : bTableProps
}
上面两个构建table
是根据选的请求接口吗
根据接口对应的数据标识，和你select对应，然后进行数据赋值即可
如有帮助，请采纳，十分感谢！