今天在写后台的时候,遇到一个问题,页面是tab进行切换的,然后很多类似的代码,于是我这边就抽出一个单独的页面进行编写,但是后面写完之后,需要根据子组件的筛选条件进行表单数据的渲染,查了有关资料,完美解决 :以下是解决方案:
父组件
<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
<el-tab-pane label="全部" name="all">
<all :receive="receive"></all>
</el-tab-pane>
<el-tab-pane label="签署中" name="sign">
<sign :receive="receive"></sign>
</el-tab-pane>
<el-tab-pane label="已完成" name="comple">
<comple :receive="receive"></comple>
</el-tab-pane>
<el-tab-pane label="即将截至签署" name="cutOff">
<cutOff :receive="receive"></cutOff>
</el-tab-pane>
</el-tabs>
methods: {
//接受子组件传来的搜索条件
receive(searchInfo) {
console.log("this.$refs.allInfo:", searchInfo);
//todo逻辑操作
},
}
子组件
<template>
<el-card class="box-card">
<el-form-item label="生效日期" v-show="showSearch">
<el-date-picker
v-model="form.effectivetime"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00']"
>
</el-date-picker>
</el-form-item>
<el-form-item label="到期日期" v-show="showSearch">
<el-date-picker
v-model="form.expiretime"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00']"
>
</el-date-picker>
</el-form-item>
</el-card>
</template>
<script>
export default {
name: "all",
props: ["receive"],//接受父组件定义的变量
data() {
return {
form: {
status:"",
effectiveStartTime: "",
effectiveEndTime: "",
expiryStartTime: "",
expiryEndTime: "",
},
showSearch: false,
};
},
created() {},
methods: {
handleQuery() {
// 调用传入的函数,将name传递给父组件
this.receive(this.form);
//这样 父组件 在receive(){}方法中就可以获取到子组件传来的数值信息了~
},
};
</script>