【Vue】Element开发笔记

Element开发笔记

前言

【Vue】vue增加导航标签
本文链接：https://blog.csdn.net/youcheng_ge/article/details/134965353

【Vue】Element开发笔记
本文链接：https://blog.csdn.net/youcheng_ge/article/details/133947977

【Vue】vue，在Windows IIS平台部署
本文链接：https://blog.csdn.net/youcheng_ge/article/details/133859117

【Vue】vue2与WebApi跨域CORS问题
本文链接：https://blog.csdn.net/youcheng_ge/article/details/133808959

【Vue】nvm安装教程（解决npm下依赖包版本冲突）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/132896207

【Vue】vue开发环境搭建教程（详细）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/132689006

【Vue】全局日期格式化
本文链接：https://blog.csdn.net/youcheng_ge/article/details/135017332

【Vue】elementUI表格，导出Excel
本文链接：https://blog.csdn.net/youcheng_ge/article/details/135018489

【Vue】el-date-picker日期范围组件（本周、本月、上周）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/135088143

【前端】前后端通信方法与差异
本文链接：https://blog.csdn.net/youcheng_ge/article/details/135153985

---

官网 https://element.eleme.cn/#/zh-CN/component/upload

其它项目网站 https://www.cnblogs.com/qq2806933146xiaobai/p/17180878.html

表格

序号列添加

1

handleIndexCalc是计算分页中的ID，否则序号不准确。

// 自动计算分页 Id
handleIndexCalc(index) {
    return (
        (this.queryParams.pageIndex - 1) * this.queryParams.pageSize + index + 1
    )
},
1
2
3
4
5
6

选择列添加

1

注意：同时拥有 序号列、选择列，序号必须在 选择列前面

表格高度统一，防止数据量少时，页脚上升

表格设置height属性，根据浏览器界面大小自动计算高度，留页脚面板高度。

<el-table ref="dataResult"
          v-loading="loading"
          :data="dataResult.dataSource"
          :height="tableHeight"
          :default-sort="{ prop: queryParams.orderby, order: queryParams.sort }"
          row-key="id"
          stripe
          border
          style="width: 100%;height=250"
          @sort-change="handleSortable">
1
2
3
4
5
6
7
8
9
10

Data：

// 表格高度
tableHeight: window.innerHeight - 280,
1
2

项目实例：

      
      
        
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
            
          
        
        
      
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

Select选择器

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

项目实例

              
                
              
1
2
3

 // 搜索框-文档状态
 statusOptions: [],
          
 // 创建时 
 created() {
    getOption('SYSTEM_STATUS').then((response) => {
      this.statusOptions = response.data
    }),
    this.getList()
  },
      
 // 选择文档状态（搜索框）
 handleSelectSearchStatus(e) {
      this.queryParams.queryStatus = e
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

el-select 使用 multiple多选属性时，数据定义必须符合规范，并且返回的是 字符串数组，一开始需要定义好，否则数据无法显示。

              
                
              
1
2
3
4
5
6
7
8
9
10
11
12
13

    // 控件绑定的
    keyWordsList: [],
        
    /** 编辑按钮操作 */
    handleEdit(row) {
      this.reset()
      this.postForm = { ...row }
      this.keyWordsList =  row.keyWords.split(',') //数据库取出来是字符串，转数组
      this.bOpenForm = true
      this.title = '编辑文档'
    },
1
2
3
4
5
6
7
8
9
10
11

dialog弹出框

需要注意浅拷贝 和 深拷贝 问题，row是Object对象类型，如果直接赋值，就变成了 浅拷贝，相当于我们的引用传递。

//方法一
this.form = JSON.parse(JSON.stringify(row));
//方法二
this.form = {...row}
1
2
3
4

/** 新增按钮操作 */
handleCreate() {
    this.reset()
    this.open = true
    this.title = '添加关键字'
},
/** 修改按钮操作 */
handleUpdate(row) {
  this.reset()
  this.form = { ...row }
  this.open = true
  this.title = '修改关键字'
},
1
2
3
4
5
6
7
8
9
10
11
12
13

每次窗体打开，并不会清除上一次验证规则，需要手动调用clearValidate()方法清除，与C#一样。

  watch: {
    // 打开弹窗，清空上一次验证规则
    bOpenForm: {
      handler(newVal) {
        if (newVal) {
          this.$nextTick(() => {
            this.$refs['postForm'].clearValidate()
          })
        }
      },
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12

el-upload上传组件

:action是执行上传动作的后台接口，el-button是触发上传的按钮。

multiple 设置是否可以同时选中多个文件上传

accept 设置限制上传文件的格式

<el-upload 
    :action="uploadActionUrl"
    accept="image/jpeg,image/gif,image/png"
    :before-upload="onBeforeUpload"
    multiple
    :limit="3"
    :on-exceed="handleExceed">
    <el-button size="small" type="primary">点击上传el-button>
    <div slot="tip" class="el-upload__tip">请上传图片格式文件div>
el-upload>
...
    onBeforeUpload(file)
    {
      const isIMAGE = file.type === 'image/jpeg'||'image/gif'||'image/png';
      const isLt1M = file.size / 1024 / 1024 < 1;

      if (!isIMAGE) {
        this.$message.error('上传文件只能是图片格式!');
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 1MB!');
      }
      return isIMAGE && isLt1M;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

属性

项目实例

这里使用了，父组件向子组件传参，子组件向父组件传参。

            
              
            
1
2
3

父组件传参数

      // 上传附件
      fileActionUrl: CONFIG_URL.PUBLIC_CONFIG.baseURL + '/api/doc/UpLoadFile',
      fileAccept: '.doc, .docx, .xls, .xlsx, .ppt, .pptx, .pdf',
      filelimit: 1,
      filelistType: 'file',
      filetips: '只能上传办公文档，其它类型建议不要上传',
1
2
3
4
5
6

子组件接收参数，在props中定义

  // 接收父组件传递的值
  props: {
    // 动作action
    actionUrl: {
      type: String,
      required: true,
      default: '/api/doc/UpLoadFile'
    },
    // 接受上传的文件类型
    accept: {
      type: String,
      required: true
    },
    // 最大允许上传个数
    uploadlimit: {
      type: Number,
      required: true,
      default: 1
    },

    /** 文件列表的类型
     * drag是否启用拖拽上传
     * list-type 可选值 text/picture/picture-card
     **/
    listType: {
      type: String,
      required: true,
      default: 'text'
    },
    // 上传提示语
    tips: {
      type: String,
      required: false
    }
  },
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

子组件向父组件回传数据

      // $emit() 向外触发父组件中方法,fileList由父组件传递过来
      this.$emit("fileList", this.ret_fileList)
1
2

父组件接收子组件回传的数据，需要在watch监听器中实现，能够感知数据变化。

  watch: {
    // 监听文件列表变化
    fileList: {
      handler() {
        this.$emit('fileList', this.ret_fileList)
      }
    }
  },
1
2
3
4
5
6
7
8

子组件代码

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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152