![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
element ui/vue-elemnt-admin
.
漂移的电子
哎呀呀
展开
-
实现el-table-column动态绑定或展示
根据权限或者特定条件选择性展示列表,实现动态el-table-column<template> <div> <el-table :data="tableData"> <el-table-column prop="a" align="center" label="A" v-if="objData.a"/> <el-table-column prop="b" align="center" label="B"原创 2021-09-03 16:04:39 · 9063 阅读 · 0 评论 -
PDF文件想在模态框里展示
.pdf 格式文件一般是在浏览器里直接打开,项目需求要在弹框里打开,就用到了iframe <el-dialog :visible.sync="dialogVisible_img" width="50%" style="background:none"> <iframe boder="0" :src="dialogImageUrl1" style="width:100%;min-height:600px;border:0; "> </iframe&g原创 2021-08-25 15:05:38 · 345 阅读 · 0 评论 -
el-table 表尾合计行,只计算最后一列
表尾合计行,只计算最后一列 <el-table :data="tableData" border show-summary :summary-method="getSummaries" style="width: 100%"> <el-table-column prop="id" label="商品ID" width="180"> </el-table-column> <el-table-column prop="name" label="商品编原创 2021-03-02 17:26:19 · 1750 阅读 · 0 评论 -
vue-element-admin导出excel文件
<el-button :loading="downloadLoading" class="filter-item" type="text" size="mini" icon="el-icon-download" @click="handleDownload(scope.row)">导出</el-button>methods:{ handleDownload(row) { this.downloadLoading = true let startDown =..原创 2021-01-28 16:04:32 · 637 阅读 · 0 评论 -
页面所有el-select设为只读、不可编辑
如果页面有多个el-select<el-select v-model="ysStore.businessCateory" filterable placeholder="请选择" :disabled="!isSearch"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select>原创 2021-01-04 19:17:07 · 19432 阅读 · 0 评论 -
el-upload 设置只读,不可编辑
详情或者其他特定环境,el-upload 设置只读//禁止上传图片function fn(e) { e.stopPropagation();}var arr = document.getElementsByClassName('el-upload--text')for (var j = 0; j < arr.length; j++) { arr[j].addEventListener('click', fn, true); }...原创 2021-01-04 19:05:13 · 2937 阅读 · 0 评论 -
“TypeError: Cannot read property ‘clearSelection‘ of undefined“
vue elementUI el-dialog中vm.$nextTick( [callback] )参数:{Function} [callback]用法: 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。...原创 2020-12-22 14:41:31 · 3255 阅读 · 1 评论 -
element ui的el-table表格添加单选框
话不多说,上源码<template> <div class="page"> <el-table :data="tableData" ref="singleTable" highlight-current-row border style="width: 100%"> <el-table-column label="单选" width="70" align="center"> <template scope="scope">.原创 2020-12-22 10:52:42 · 13499 阅读 · 6 评论 -
vue项目引入高德地图(定位、搜索、经纬度解析地址)
1、npm 安装npm install vue-amap --save2、main.js文件引入vue-amapimport VueAMap from 'vue-amap'Vue.use(VueAMap);VueAMap.initAMapApiLoader({ key: '你申请的key', plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', '.原创 2020-12-09 17:15:31 · 5741 阅读 · 20 评论 -
el-upload只能上传一张图片&&上传多张图片到服务器&&赋值
一、只能上传一张<template> <div> <el-upload v-model="coverPic" :action="上传的地址" :show-file-list="false" :on-success="handlePic" class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif"> <img v-if="dialogVisible" :src="coverPic" class="av原创 2020-11-30 15:36:15 · 2843 阅读 · 0 评论 -
DatePicker 日期选择器el-date-picker赋值&&带快捷选项
<template> <div> <el-date-picker v-model="pickDate" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" /> </div></template>原创 2020-11-30 14:35:30 · 5049 阅读 · 1 评论 -
element-ui中el-table expand 手风琴效果,展开里面的内容或者table,展开下一个,上一个自动收起
<template> <div style="margin: 20px;"> <el-table ref="table" stripe fit highlight-current-row :data="tableData" style="width:800px" > <el-table-column label="ID" prop="id" align="center"> </el-table-column> <e.原创 2020-10-23 14:08:53 · 3680 阅读 · 5 评论 -
element ui el-switch用数字表示是开关
<template> <div> <el-switch v-model="val" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0" /> </div></template><script> export default{ data(){ return{原创 2020-09-03 15:50:44 · 917 阅读 · 1 评论 -
el-table增加一行或者减少一行
<template> <div> <el-table :data="Arr1" border tooltip-effect="dark" style="width: 90%;margin-bottom: 20px;"> <el-table-column label="阶梯" align="center"> <template slot-scope="scope"> 第{{scope.row.groupLevel}}层.原创 2020-11-17 14:41:04 · 4925 阅读 · 0 评论 -
el-date-picker创建快捷方式&& 时间日期赋值
<template> <div> <el-date-picker v-model="pickDate" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" /> </div></template><scri.原创 2020-11-17 14:25:36 · 1015 阅读 · 0 评论 -
在vue项目 使用echarts图表&&解决渲染图表文字模糊问题
通过 npm 安装 echartsnpm install echarts --save引入使用<template> <div class="dashboard-container"> <div id="chartBox" style="width: 60%;height:50vh;"></div> </div></template><script>import echarts from 'ec原创 2020-09-02 10:05:03 · 1402 阅读 · 0 评论 -
el-select 默认选中第一个,动态&&静态获取
第一种情况:el-select动态获取数据, 默认选中第一个<el-select v-model="formData.operator_id" placeholder="请选择" class="filter-item" style="width: 130px"> <el-option v-for="item in operatorLists" :key="item.key" :label="item.operator_name" .原创 2020-08-12 13:32:55 · 38709 阅读 · 10 评论 -
解决vue-admin-template插件&&element UI组件默认英文改中文
其实vue-admin-template这个框架原来就有的src/main.js:如图:原创 2020-03-29 16:37:22 · 2660 阅读 · 0 评论 -
vue+element-ui upload前端js压缩图片上传
安装image-conversion包npm i image-conversion --save<template> <div class="select_invoice"> <el-upload class="upload-demo" :multiple="true" :action="你服务器" :data="uploadData" ...转载 2020-03-02 11:40:28 · 1002 阅读 · 6 评论 -
el-table设置某row横行数据字体颜色或者背景色
element table 修改字体颜色,根据条件判断设置符合条件的,数据字体或者背景改变颜色。 <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" :row-class-name="ta...原创 2019-12-10 16:02:41 · 7565 阅读 · 0 评论 -
搞定DateTimePicker 日期时间选择器el-date-picker
element-ui的DateTimePicker 日期时间选择器原创 2019-11-08 16:10:50 · 1351 阅读 · 0 评论 -
vue-element-admin/vue/element ui项目中重构数组,把接口返回值用到选择器中
接口返回:{“code”: 0,“data”: {“1”: “马铃薯”,“2”: “土豆”},“message”: “成功”} <!-- 搜索表单 --> <el-form :inline="true" :model="searchForm" class="search-form"> <el-form-item label="类型:"&g...原创 2019-09-30 15:40:17 · 603 阅读 · 0 评论 -
vue和element ui用el-switch滑动开关改变每行的状态,源码例子
源码例子: <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" class="table_box"> <el-table-column prop="status" label="是否上架" align="center" min-w...原创 2019-09-30 15:17:43 · 1802 阅读 · 0 评论 -
vue和element ui用el-upload上传图片到服务器,源码例子
项目需要,思索良久,众里寻他千百度,办法尽在官方文档处。你若在坑里,希望可以拉你一把。源码如下:<template> <div> <el-upload class="upload-demo" ref="upload" action="服务器地址" :on-preview="handlePreview" :on-remove="handle...原创 2019-09-30 15:01:26 · 4887 阅读 · 4 评论 -
vue-element-admin框架中el-table后台返回数字,前台变成对应得汉字
如接口返回:2 3 4,需要换成对应汉字方法一、 <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" > <el-table-column prop=...原创 2019-09-10 13:42:38 · 8303 阅读 · 7 评论 -
vue-element-admin模板,点击跳转到另一个页面传参
a页面 <el-table> <el-table-column prop="id" align="center" label="ID" /> <el-table-column label="操作"> <template slot-scope="scope"> <el-button ty...原创 2019-09-30 16:34:48 · 9917 阅读 · 7 评论 -
element-ui/vue-element-admin上传excel等文件到服务器
上源码 <el-upload ref="uploadExcel" action="你上传的服务器地址" :limit="limitNum" :auto-upload="true" accept=".xlsx" :befo...原创 2019-10-25 14:46:54 · 8357 阅读 · 7 评论 -
element-ui/vue-element-admin导出excel文件
element-ui/vue-element-admin导出excel文件,我试了好多办法,这个是我发现最简单的,和大家分享一下下原创 2019-11-06 17:43:21 · 2636 阅读 · 0 评论 -
解决vue-elemnt-admin本地运行每次都打开两个登录页
解决vue-elemnt-admin本地运行每次都打开两个登录页,有图有真相原创 2019-11-07 16:59:45 · 1567 阅读 · 1 评论