vue
少十步
这个作者很懒,什么都没留下…
展开
-
Element Plus table 列合并 实现效果
vue3+ts,tag样式使用的是colorUi 的tag 和 bg 样式 ,然后改了单位 合并 通过table 的 span-method 实现。原创 2023-12-23 13:05:55 · 733 阅读 · 0 评论 -
vue3 自动下载使用 iconify图标以及自定义svg图标
自定义图标只要下载svg 文件到 assets/icons 文件夹下,自定义图标 通过icon-图标名称访问,iconify图标通过i-图标来源-图标名称访问 i-ep-edit i-ant-design-user。开发中经常使用图标,通过unplugin-icons 插件我们可以在项目中自动下载所需的图标,但实际开发中我们还需要iconfont以及项目ui切图中的图标,这就需要使用自定义SvgIcon组件。vite.config.ts配置。unocss.config.ts配置。原创 2023-10-11 09:00:33 · 1619 阅读 · 0 评论 -
vue使用qrcode生成二维码,并在二维码下面添加文字描述
vue使用qrcode生成二维码,并在二维码下面添加文字描述原创 2022-08-19 14:43:42 · 5569 阅读 · 5 评论 -
antd vue tree table 左侧树 右侧表格 根据树选择筛选
<template> <div> <div style=" display: flex; justify-content: space-between; height: 20rem; background: white; margin-bottom: 2rem; " > <a-tree row-key="index.原创 2022-06-25 07:53:14 · 1804 阅读 · 0 评论 -
vue 二维码生成、打包或单个下载
主要实现二维码的生成及下载,使用到的插件qrcode、file-saver、jszip1、npm 包安装 npm -s iqrcode file-saver jszip2、在页面中使用import JSZip from 'jszip'import fileSaver from 'file-saver'import QRCode from 'qrcode'生成二维码const options = { errorCorrectionLevel...原创 2021-08-20 10:50:01 · 657 阅读 · 0 评论 -
element ui transfer 穿梭框 分页实现,接口获取、更新数据
使用穿梭框数据量大时需要分页,官方的组件并不能满足需求。数据大时不分页一次渲染页面卡。通过重新修改官方源码、封装实现分页。1、新建TransferPanel 组件,根据官方源码修改适配<template> <div class="el-transfer-panel" style="width: 17.5rem"> <p class="el-transfer-panel__header"> <el-checkbox v原创 2021-08-05 15:38:52 · 11552 阅读 · 9 评论 -
vue iview-design table 实现滚动加载数据
<template> <Table width="550" height="200" border :columns="columns2" :data="data4"></Table></template><script>export default { data () { return { columns2: [ { title: 'Name', key:.原创 2021-06-29 15:34:59 · 2244 阅读 · 5 评论 -
elementui upload 文件上传组件封装,预览、删除、下载、上传格式、超出限制隐藏上传、阿里oss自定义上传。
1、新建组件FileUpload.vue<template> <div> <el-upload :action="action" :file-list="fileList" list-type="picture-card" :http-request="uploadHttp" :headers="headers" :limit="limit" :accept="accept"原创 2021-06-08 11:29:01 · 1790 阅读 · 2 评论 -
css 实现wifi,gprs 信号
1、wifi信号实现 <div class="box"> <div class="wifi-symbol"> <div class="wifi-circle first"></div> <div class="wifi-circle second"></div> <div class="wifi-circle third原创 2021-04-17 15:36:38 · 1015 阅读 · 0 评论 -
element ui vue cascader省市区级联选择
ant-design-vue 默认英语配置,汉化配置需在使用<Nuxt />的页面配置,如在 layouts/default.vue:<a-config-provider :locale="locale"> <Nuxt /></a-config-provider><script>import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'exp原创 2021-02-01 11:24:53 · 1594 阅读 · 0 评论 -
ant-design-vue cascader级联选择省、市、区
默认返回值格式:all:code、name都返回 name:只返回name code:只返回code,level:可设置显示层级 1: 省 2: 省、市 3: 省、市、区v-model 默认值 可以是 name: [ "天津市", "天津市", "和平区" ]code: [ "120000", "120100", "120101" ]all:[ { "code": "120000", "name": "天津市" }, { "code": "120100", "name": "天津市" }, { ..原创 2021-01-23 10:22:15 · 7249 阅读 · 1 评论 -
vue iview select 远程搜索选择后再次打开默认不选中
<template> <Select ref="setQuery" :value="value" filterable transfer clearable label-in-value :default-label="label" :remote-method="find" :disabled="readonly" :loading="loading" :placeholder="placeho.原创 2020-10-30 08:00:22 · 1330 阅读 · 0 评论 -
vue 前端excel文档导出
1、包安装及使用npm i -s vue-json-excel在vue main.js 中,或者在nuxt 框架plugins 文件夹下新建import Vue from 'vue'import JsonExcel from 'vue-json-excel'Vue.component('downloadExcel', JsonExcel)2、在页面中使用<download-excel :fields="exports.fields" :name=...原创 2020-06-07 12:51:54 · 343 阅读 · 0 评论 -
iview admin axios线上跨域及部署路由访问刷新404解决
1、在main.js引入axiosimport axios from 'axios'Vue.prototype.$axios = axios; //这样可以在vue页面通过this.$axios全局访问const { dev, pro } = config.baseUrl;axios.interceptors.request.use(configs => {//请求前拦...原创 2019-12-31 08:07:14 · 1301 阅读 · 0 评论 -
vue 中 elementui Dropdown 下拉菜单中 选项的click事件
<el-dropdown-menu slot="dropdown"> <el-dropdown-item @click.native="refresh">刷新当前</el-dropdown-item> <el-dropdown-item @click.native="closeTab">关闭当前</el原创 2018-12-18 15:17:41 · 8354 阅读 · 4 评论