【WTM实战教程】 003 vue生命周期简单介绍和列表页修改指南

KnifeZ 11/26/2020, 12:09:36 PM 551

来点理论知识--vue生命周期

vue生命周期

图来自vue官网https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

在实际使用中,常用的有3个钩子函数,分别是 createdmounteddestoryed,(省略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-boxwtm-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按钮,

  1. 想要控制显示隐藏权限,可设置v-visible属性,权限从actionlist中读取,add/edit等在config/enum.ts里查看
  2. 想要设置选择列表数据后启用,否则设置不可用的话如上代码,设置disabled属性,selectedData为列表选中数据,判断其长度即可。
  3. 如果不需要默认的按钮,如移除导入导出,修改按钮等,可以在config.ts中找到ASSEMBLIES,然后删除对应的配置项即可,当然,也可以直接在后端配置权限设置不显示
如果觉得文章帮助了您,可以请我喝杯咖啡

#Tags

WTMVue

发表评论

邮箱
昵称

热门文章

本站已稳定运行了1天 共计人访问
Powered by .NET 5 on ubuntu