假设有下拉选项框,1、2、3、表格1、2、3,通过下拉选项框控制表头,实现原理,先改变下拉选项框的值,判断下拉选项框的值是啥,根据不同的值,定义不同的表头,随后在表中进行循环每一列
定义表格的列 为空数组,下拉选项框1、2、3、
下拉选项框监听函数,当下拉选项框的值改变的时候进行判断
<el-select v-model="form.value" @change="OptionChange">
<el-option
v-for="item in DataLists"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
OptionChange() {
if (this.value == 1) {
this.column = [
{ name: "name", label: "姓名" },
{ name: "Address", label: "地址" },
];
}else if(this.value == 2){
this.column = [
{ name: "name", label: "姓名" },
{ name: "age", label: "年纪" },
{ name: "Starttime", label: "日期" },
];
}else{
this.column = [
{ name: "name", label: "姓名" },
{ name: "Address", label: "地址" },
{ name: "age", label: "年纪" },
{ name: "Starttime", label: "日期" },
];
}
}
循环遍历数组的列,将函数中的列填充进去
<el-table
class="pravite_table"
:data="tableData"
style="height: 100%;"
stripe
>
<el-table-column
type="index"
label="序号"
align="center"
width="150px"
>
</el-table-column>
<el-table-column
v-for="(item, index) in column"
:key="index"
:prop="item.name"
:label="item.label"
align="center"
></el-table-column>
</el-table>