表面:前后分离,实际:骨肉相连;前后一体,从后生前,以前至后。
一、 前端返回
可能对于写页面简单吧,有现成的,只需要去模仿就OK了,结果没有弄清楚需求,直接写了并立的两个页面,最后需求是从第一个页面跳到第二个页面,并且可以返回,下面是关于前端返回的实现。
1.页面
// 展示,Element UI组件
<el-button
type="primary"
@click="getBack"
icon="el-icon-back"
size="mini"
>{{ $t("common.return") }}</el-button
>
2.方法逻辑
// 在 <script> 中的 methods:里面
getBack() {
let self = this;
this.tableParams.current = this.$route.query.current;
this.tableParams.size = this.$route.query.size;
this.tableParams.total = this.$route.query.total;
let param = {...this.tableParams};
self.$router.push({
path: "/base/customerorg/index",
query: param,
});
},
二、 重置
一个前端最常见常用的功能,简单也容易看懂,赶紧记录下来。
1.页面效果
// 一个 button 按钮搞定
<el-button @click="clean">{{$t('common.reset')}}</el-button>
2.事件处理
// 在 <script> 一般 data 里面
return {
orgCodes: [],
treeDeptData: [],
orgLlabelCodes: [],
customerLabelCodes: [],
timecheacked: "",
filterForm: {
taskCode: "",
taskName: "",
userCode: "",
customerCode: "",
customerName: "",
taskType: "",
startDate: "",
endDate: "",
customerLabelCodes: [],
orgLabelCodes: [],
orgCode: "",
},
}
// // 在 <script> 中的 methods(钩子函数)里面
clean() {
this.reset();
this.timecheacked = "";
this.orgCodes = [];
this.filterForm.customerLabelCodes = [];
this.filterForm.orgLabelCodes = [];
},
—————————————————————————————————————————————
就这?就这?就这就这!!!
—————————————————————————————————————————————