提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

记录关于Vue+element-ui的系列问题

VueUI 问题 记录 系列 关于 Element
2023-06-13 09:14:09 时间

这里将记录自己工作或学习中关于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滚动加载 支持远程搜索

滚动加载数据 在入口文件 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

远程搜索 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);
},

相关文章