【WTM实战教程】 003 vue生命周期简单介绍和列表页修改指南
KnifeZ 11/26/2020, 12:09:36 PM 277
来点理论知识--vue生命周期
图来自vue官网https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
在实际使用中，常用的有3个钩子函数，分别是 created、mounted、destoryed,(省略before)。借助上图可知，页面访问过程中，先走 created，然后走 mounted、最后想在关闭/销毁页面时会调用 destoryed函数。
详细见vue官网 api
钩子函数
created钩子函数中页面还未渲染成html,通过id等查找元素的代码不可用，一般用来预加载页面数据，如下拉选项数据。
写法：
created() {
console.log("created");
}
0
1
2
mounted钩子函数是在页面渲染成html之后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。类似于js中的 document.ready。
写法：
mounted() {
console.log("mounted");
}
0
1
2
destoryed钩子函数是在vue生命周期结束后执行，也就是页面关闭/销毁时，一般用 beforeDestory,用于在页面关闭之前处理一些操作，如app.vue中使用当页面关闭时清空cookie等。
写法：
beforeDestory() {
console.log("beforeDestory");
}
0
1
2
列表页内容解析
生成的vue列表页。主要有 wtm-search-box、wtm-but-box,wtm-table-box,dialog-form,upload-box组成。
wtm-search-box--查询条件框
wtm-but-box --table toolbar按钮
wtm-table-box --table列表
dialog-form--添加修改弹窗
upload-box--excel附件上传窗口
template
card
el-button @click="customShow"自定义方法展示/el-button
wtm-search-box
:ref="searchRefName"
:events="searchEvent"
:formOptions="SEARCH_DATA"
:needCollapse="true"
:isActive.sync="isActive"
/
!-- 操作按钮 --
wtm-but-box
:assembly="assembly"
:action-list="actionList"
:selected-data="selectData"
:events="actionEvent"
/
!-- 列表 --
wtm-table-box
:attrs="{ ...searchAttrs, actionList }"
:events="{ ...searchEvent, ...actionEvent }"
/wtm-table-box
!-- 弹出框 --
dialog-form
:is-show.sync="dialogIsShow"
:dialog-data="dialogData"
:status="dialogStatus"
@onSearch="onHoldSearch"
/
!-- 导入 --
upload-box
:is-show.sync="uploadIsShow"
@onImport="onImport"
@onDownload="onDownload"
/
/card
/template
script lang="ts"
import { Component, Vue } from "vue-property-decorator";
import { Action, State } from "vuex-class";
import searchMixin from "@/vue-custom/mixin/search";
import actionMixin from "@/vue-custom/mixin/action-mixin";
import DialogForm from "./views/dialog-form.vue";
import store from "./store/index";
// 查询参数, table列 ★★★★★
import { ASSEMBLIES, TABLE_HEADER, PageModelTypes } from "./config";
import i18n from "@/lang";
import { Message } from "element-ui";
@Component({
name: "article",
mixins: [searchMixin(TABLE_HEADER), actionMixin(ASSEMBLIES)],
store,
components: {
DialogForm,
},
})
export default class Index extends Vue {
isActive: boolean = false;
@Action
getArticleCategory;
@Action
mySearchData;
@State
getArticleCategoryData;
customShow() {
this.mySearchData({ Name: "test" }).then((res) = {
Message.success(res);
});
}
get SEARCH_DATA() {
return {
formProps: {
"label-width": "75px",
inline: true,
},
formItem: {
Title: {
label: "标题",
rules: [],
type: "input",
},
Name: {
label: "名称",
rules: [],
type: "input",
},
ArticleCategoryID: {
label: "类别",
rules: [],
type: "select",
children: this.getArticleCategoryData,
props: {
clearable: true,
placeholder: "全部",
},
isHidden: !this.isActive,
},
Url: {
label: "生成地址",
rules: [],
type: "input",
isHidden: !this.isActive,
},
PageModel: {
label: "页面优化类型",
rules: [],
type: "select",
children: PageModelTypes,
props: {
clearable: true,
placeholder: this.$t("form.all"),
},
isHidden: !this.isActive,
},
},
};
}
mounted() {
this.getArticleCategory();
}
}
/script
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
如何修改查询条件
先在页面中找到 SEARCH_DATA,通常情况下里面的数据都是在生成时勾选的列，如果想去掉某个查询条件，直接把去掉这个字段就行了，例如不想查询Name,只需删除以下代码即可。
Name: {
label: "名称",
rules: [],
type: "input",
},
0
1
2
3
4
同时查询按钮点击右侧下拉会显示更多查询条件，而控制这一效果的参数为 isHidden:!this.isActive。当点击下拉时会将isActive的值反转，true变false,false变true。从而控制查询条件的显示和隐藏。SEARCH_DATA内数据的顺序即为查询条件的展示顺序。
如果查询条件较少，不想使用该效果，将 wtm-search-box中的 :needCollapse="true" :isActive.sync="isActive"删除即可，或者设置needCollapse为false。
也可以通过添加 span属性控制查询条件显示宽度。
如何修改table显示字段
找到同级目录下的config.ts,通过添加删除 TABLE_HEADER中的数据控制列表显示列。
sortable控制列表是否可以点击表头排序，设置为cutsom时可防止数字排序错误。
如何添加toolbar按钮
!-- 操作按钮 --
wtm-but-box
:assembly="assembly"
:action-list="actionList"
:selected-data="selectData"
:events="actionEvent"
el-button
@click="customShow"
:disabled="selectedData.length == 0"
v-visible="actionList['add']"
自定义添加/el-button
/wtm-but-box
0
1
2
3
4
5
6
7
8
9
10
11
12
13
直接在 wtm-but-box中添加button按钮，
- 想要控制显示隐藏权限，可设置v-visible属性，权限从actionlist中读取，add/edit等在
config/enum.ts里查看 - 想要设置选择列表数据后启用，否则设置不可用的话如上代码，设置disabled属性，selectedData为列表选中数据，判断其长度即可。
- 如果不需要默认的按钮，如移除导入导出，修改按钮等，可以在config.ts中找到
ASSEMBLIES，然后删除对应的配置项即可，当然，也可以直接在后端配置权限设置不显示
