Element UI相关_el-icon-circle-plus

上传

<el-upload class="avatar-uploader" action="上传地址" headers="headers" :file-list="filesList" :limit="5" :on-exceed="handleExceed" accept=".jpg,.png,.BMP" :before-upload="beforeUpload" :before- remove="beforeRemove" :on-remove="handleRemove" :on-preview="handlePreview" :on-success="handleSuccess">
	<div class="uploader f-a f-j">
		<div>
			<i class="el-icon-circle-plus-outline"></i>
			<el-col class="upload-center">选择附件</el-col>
		</div>
	</div>
</el-upload>

<script>
	// 上传
      // 文件超出个数限制
      handleExceed() {
        this.$notify({
          title: "警告",
          message: "达到最大创建数，不可以创建更多了",
          type: "warning",
        });
      },
      // 文件上传之前
      beforeUpload(file) {
        console.log(file);
      },
      // 文件删除之前
      beforeRemove(file, fileList) {
        console.log(file, fileList);
      },
      // 文件删除
      handleRemove(file, fileList) {
        console.log(file, fileList);
        this.data.courseFileUrls = []
        this.data.courseFileNames = []
        fileList.forEach(element => {
          this.data.courseFileUrls.push(element.response.msg)
          this.data.courseFileNames.push(element.name)
        });
      },
      // 点击已上传文件
      handlePreview(file) {
        console.log(file);
      },
      // 文件上传成功
      handleSuccess(response, file, fileList) {
        console.log(response, file, fileList);
      },
</script>
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

el-table文字超出，解决办法

show-overflow-tooltip

 <el-table-column
          prop="createTime"
          label="提交时间"
          show-overflow-tooltip
        >
</el-table-column>
1
2
3
4
5
6

el-table文字居中

1. 单行居中

<el-table-column prop="time" label="考勤修改" width="500" align="center">
</el-table-column>
1
2

2. 全部居中

<el-table
    :data="tableData"
    :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}"
    style="width: 100%">
</el-table>
1
2
3
4
5
6

MessageBox 弹框VNode自定义的使用

        const h = this.$createElement;
        var self = this;
        this.$msgbox({
          title: "操作确认",
          message: h("p", null, [
            h("span", null, `是否执行${self.text}操作`),
            h("input", {
              domProps: {
                value: self.value,
                type: "text",
              },
              on: {
                input: function (event) {
                  self.value = event.data;
                  self.$emit("input", event.target.value);
                },
              },
            }),
          ]),
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          this.$emit("confirm", this.id);
          this.$emit("value", this.value);
        });
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