problem description:
this prompt is only available under el-tab-pane. If you put the code in the outer layer, you won"t get it wrong? How should this problem be solved?
error prompt:
Local Code:
<el-tab-pane v-for="item in TabType" :label="item.name" :name="item.id" :key="item.id">
<div v-show="true ? item.id == 1 || item.id == 2 || item.id == 3 : item.id == null">
{{item.name}}
</div>
<div v-show="true ? item.id == 4 : item.id = null">
<div class="fxn-search">
<el-form :inline="true" :model="SearchForm" :rules="SearchRules" ref="SearchForm">
<el-form-item label="" prop="bill_no">
<el-select v-model="SearchForm.status">
<el-option v-for="item in AvoidsStatus" :name="item.name" :key="item.id" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item>
<el-button type="success"></el-button>
<el-button type="warning" @click="resetForm("SearchForm")"></el-button>
</el-form>
</div>
</div>
</el-tab-pane>
<script>
export default {
data(){
return{
activeName: "1",
//Tab
TabType: [
{id: "1",name: "A"},
{id: "2",name: "B"},
{id: "3",name: "C"},
{id: "4",name: "D"},
],
//
AvoidsStatus: [
{id: 1,name: ""},
{id: 2,name: ""},
{id: 3,name: ""}
],
//
SearchForm: {},
SearchRules: {},
}
},
methods:{
//Tab
handleClick(tab, event) {
console.log(tab, event);
},
//
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
mounted(){
}
}
</script>