菜鸟前端开发之返回重置

表面：前后分离，实际：骨肉相连；前后一体，从后生前，以前至后。

一、 前端返回

可能对于写页面简单吧，有现成的，只需要去模仿就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 = [];
},

—————————————————————————————————————————————
就这？就这？就这就这！！！
—————————————————————————————————————————————