in the project, you need to extract some selection criteria from the header to encapsulate common components, but different pages need to display different content.
I have tried to control it by calling the component of the generic component (parent component), but I always feel that there are other good ways, such as whether vuex can do it. But do not dabble in it deeply, ask the great god for advice!
related codes
/ / parent component call, here only do the function of the button, not show the hidden function
<condition
@newTableRow = "newTableRow"
@modifyContent = "modifyContent"
@deleteData = "deleteData"
@schoolIdChange = "schoolIdChange"
@gradeIdChange = "gradeIdChange"
@classIdChange = "classIdChange"
>
</condition>
<template>
<div class="filter-container">
<el-select v-model="schoolValue" placeholder="">
<el-option
v-for="(item,index) in schoolOptions"
:key="index"
:label="item.fullname"
:value="item.id">
</el-option>
</el-select>
<el-select v-model="gradeValue" placeholder="" >
<el-option
v-for="(item,index) in gradeOptions"
:key="index"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-select v-model="classValue" placeholder="">
<el-option
v-for="(item,index) in classOptions"
:key="index"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<!-- <span class="studentNum">:{{tableData.length}}</span> -->
<div style="float:right;">
<el-button style="margin-left:10px; " type="primary" icon="el-icon-plus" @click="_newTableRow"></el-button>
<el-button style="margin-left:10px;" type="primary" icon="el-icon-edit" @click="_modifyContent"></el-button>
<el-button style="margin-left:10px;" type="primary" icon="el-icon-delete" @click="_deleteData"></el-button>
<el-input placeholder="" style="width:200px;margin-left:10px;"></el-input>
<el-button style="margin-left:10px;" type="primary" icon="el-icon-search"></el-button>
</div>
</div> < / template >
< script >
import {allschoolList, allgradeList,allclassList} from "@ / api/organizationAd";
export default {
data () {
return {
schoolOptions: [],
gradeOptions: [],
classOptions: [],
schoolValue: "",
gradeValue: "",
classValue:"",
};},
mounted () {
//
allschoolList().then(res => {
if (res.data.success) {
this.schoolOptions = res.data.data;
this.schoolOptions.unshift({
fullname: "",
id: 0,
shortname: Date.now()
});
}
});
//
allgradeList().then(res => {
if (res && res.data.success) {
console.log(res.data.data);
this.gradeOptions = res.data.data;
}
});},
watch: {
schoolValue(val) {
// id
this.$emit("schoolIdChange",val)
},
gradeValue(val) {
this.$emit("gradeIdChange",val)
},
classValue(val) {
this.$emit("classIdChange",val)
},},
methods: {
_newTableRow(){
this.$emit("newTableRow")
},
_modifyContent(){
this.$emit("modifyContent")
},
_deleteData(){
this.$emit("deleteData")
}}
};
< / script >