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

DatePicker快捷选项

/*
* @name: range-pick-opt.js 日期选择器快捷选项
* @Author: tzy1997
* @Date: 2020-11-18 17:30:20
* @LastEditors: tzy1997
* @LastEditTime: 2021-11-22 15:16:14
*/
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 声明变量使用就好。

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

template 代码

<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 中加入以下代码生成自定义指令
    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 代码
    <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中需要声明的变量:
    data(){
    return{
    status:'loadmore',
    form:{
    tid:0
    },
    list: [],
    loadmorePage: {
    pageNum: 1,
    pageSize: 20,
    },
    }
    }
    methods中的方法:
    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中的方法:
    remoteMethod(query) {
    // query 搜索框输入的值
    this.list = []; // 置空数据
    this.loadmorePage.pageNum = 1; // 重置页码
    this.getList(query); // 按 query 搜索
    }
    效果如下:

上传图片

template 代码:

<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 中需要声明的变量:

data(){
return{
imageUrl: "",
}
}
// 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中需要声明的变量:

data(){
return{
timer: null,
}
}

methods中的方法:

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);
},