这里将记录自己工作或学习中关于Vue+element-ui的系列问题，如果您有有更好的解决方法可以在下面进行评论喔~

DatePicker快捷选项

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
import i18n from '@/lang'  // 如果不需要 中英文则注释掉
//时间选择
const rangePickerOptions = {
    shortcuts: [{
            // text: "今天",
            text: i18n.t('shortcuts.t1'),
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                picker.$emit("pick", [start, end]);
            }
        },
        {
            // text: "昨天",
            text: i18n.t('shortcuts.t2'),
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit("pick", [start, end]);
            }
        },
        {
            // text: "最近一周",
            text: i18n.t('shortcuts.t3'),
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
            }
        },
        {
            // text: "当前月",
            text: i18n.t('shortcuts.t4'),
            onClick(picker) {
                const start = new Date();
                const end = new Date();
                start.setDate(1);
                start.getTime();
                picker.$emit("pick", [start, end]);
            }
        },
        {
            // text: "上个月",
            text: i18n.t('shortcuts.t5'),
            onClick(picker) {
                const oDate = new Date();
                let year = oDate.getFullYear();
                let month = oDate.getMonth();
                let start, end;
                if (month == 0) {
                    year--;
                    start = new Date(year, 11, 1);
                    end = new Date(year, 11, 31);
                } else {
                    start = new Date(year, month - 1, 1);
                    end = new Date(year, month, 0);
                }
                picker.$emit("pick", [start, end]);
            }
        },
        {
            // text: "最近一个月",
            text: i18n.t('shortcuts.t6'),
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
            }
        },
        {
            // text: "最近三个月",
            text: i18n.t('shortcuts.t7'),
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
            }
        },
        {
            // text: "最近半年",
            text: i18n.t('shortcuts.t8'),
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                picker.$emit("pick", [start, end]);
            }
        },
        {
            // text: "今年至今",
            text: i18n.t('shortcuts.t9'),
            onClick(picker) {
                const end = new Date();
                const start = new Date(new Date().getFullYear(), 0);
                picker.$emit("pick", [start, end]);
            }
        }
    ]
}
export default rangePickerOptions

在组件中直接引入，然后在data 声明变量使用就好。

1
import rangePickerOptions from "@/utils/range-pick-opt";

template 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<el-date-picker
    v-model="PerFilter.interval"
    type="daterange"
    unlink-panels
    size="small"
    format="yyyy-MM-dd"
    value-format="yyyy-MM-dd"
    :range-separator="$t('tagText.to')"
    :start-placeholder="$t('tagText.order_time_st')"
    :end-placeholder="$t('tagText.order_time_ed')"
    :picker-options="rangePickerOptions"
    popper-class="date-picker-class"
    clearable
></el-date-picker>

效果如下：

Select滚动加载 支持远程搜索

  1. 滚动加载数据
    在入口文件 main.js 中加入以下代码生成自定义指令
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    Vue.directive('loadmore', {
        bind(el, binding) {
            // 获取element-ui定义好的scroll盒子
            const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
            SELECTWRAP_DOM.addEventListener('scroll', function() {
                const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
                if (CONDITION) {
                    binding.value()
                }
            })
        }
    })
    template 代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <el-select
        v-model="form.tid"
        clearable
        filterable
        remote
        reserve-keyword
        v-loadmore="loadMore"
        :remote-method="remoteMethod"
    >
        <el-option
        v-for="(item, index) in list"
        :key="index"
        :label="item.username"
        :value="item.uid"
        >
        <div>
             <span>自定义的内容</span>
        </div>
        </el-option>
    </el-select>
    data中需要声明的变量：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    data(){
        return{
            status:'loadmore',
            form:{
                tid:0
            },
            list: [],
            loadmorePage: {
                pageNum: 1,
                pageSize: 20,
            },
        }
    }
    methods中的方法:
    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
    loadMore() {
        if (this.status == "nomore") {
            // 已经到最后一页了  return
            return;
        }
        this.loadmorePage.pageNum += 1;
        this.getList();  // 获取目标数据
    }
    async getList(value = "") {
        const { Code, Data, Page } = await getApi({
            Page: {
                PageNum: this.loadmorePage.pageNum,
                PageSize: this.loadmorePage.pageSize,
            },
            filter: value,
        });
        if (!Data || !Data.length) {
            this.status = "nomore";
            return;
        }
        // haxNextPage 是否有下一页
        if (!Page || !Page.haxNextPage) {
            this.status = "nomore";
            this.list = this.list.concat(Data);
        } else {
            this.status = "loadmore";
            this.list = this.list.concat(Data);
        }
    }
    效果如下：
    往下滚动 加载第二页的数据
    往下滚动 加载第三页的数据
    往下滚动 继续 加载下一页的数据
    直到加载完所有的数据 则 return
  2. 远程搜索
    methods中的方法:
    1
    2
    3
    4
    5
    6
    remoteMethod(query) {
        // query 搜索框输入的值
        this.list = [];  // 置空数据
        this.loadmorePage.pageNum = 1; // 重置页码
        this.getList(query); // 按 query 搜索
    }
    效果如下：

上传图片

template 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<el-form-item prop="srvimage" label="图片">
    <el-upload
        class="avatar-uploader"
        :show-file-list="false"
        list-type="picture-card"
        action="#"
        accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"
        :limit="1"
        :before-upload="beforeAvatarUpload"
    >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</el-form-item>

data 中需要声明的变量：

1
2
3
4
5
data(){
    return{
        imageUrl: "",
    }
}
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
// Api接口 在页面引入即可
export function traderServerPicture(data) {
    let config = {
        headers: {
            "Content-Type": "multipart/form-data;",
        },
    };
    return request({
        url: "mt4/tdserver/picture",
        method: "post",
        data,
        config
    })
}
//上传标题图片
beforeAvatarUpload(file) {
    //上传前对图片类型和大小进行判断
    const isJPG = file.type === "image/jpeg";
    const isGIF = file.type === "image/gif";
    const isPNG = file.type === "image/png";
    const isBMP = file.type === "image/bmp";
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.$message.error("上传头像图片只能是 JPG/GIF/PNG/BMP 格式!");
        return;
    }
    if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return;
    }
    //将文件转化为formdata数据上传
    let formData = new FormData();
    formData.append("uploadfile", file);
    traderServerPicture(formData).then((res) => {
      // 你的业务逻辑
    })
    .catch((error) => {
        this.$message.error(error);
    });
},

寻轮调用接口

给页面绑定一个ID，目的是为了 离开该页面后 不再轮询调用接口。

data中需要声明的变量：

1
2
3
4
5
data(){
    return{
        timer: null, 
    }
}

methods中的方法:

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
getDataListSeconds() {
    let baseURL =
    process.env.NODE_ENV === "production"
        ? process.env.VUE_APP_BASE_API
        : "/api";
    axios({
        url: `${baseURL}/xxx/xxx/list`,
        method: "post",
        headers: {
            "X-Token": getToken()
        }
    })
    .then(res => {
        // 你的业务逻辑
    })
    .catch(error => {
        this.$message.error(error);
    });
},
// 定时获取接口信息
intervalData() {
    this.timer = setInterval(() => {
        // 离开页面时 不再调用接口
        if (document.getElementById("isInterval") === null) {
            clearInterval(this.timer);
            return;
        }
        this.getDataListSeconds();
    }, 1000);
},