![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Element-UI
昨夜太平长安888
愿你我既可以朝九晚五,也可以浪迹天涯;愿你我既可以拈花把酒,也能围炉诗书茶。
展开
-
element-ui 中标签el-select选中无反应问题
el-select标签,如果外部还嵌套循环,点击选中标签无反应,删除也不好使,原因由于层次太多,导致render函数没有自动更新;在el-select标签内加入 @change=“$forceUpdate()” ,强制刷新视图即可。原创 2022-06-20 13:56:52 · 5539 阅读 · 0 评论 -
vue 动态添加条件或表头
话不多说 直接看效果代码如下:<template> <div> <el-form ref="formRef" label-width="70px" :model="formData" autocomplete="on" @submit.prevent> <el-row v-for="(item, index) in formData.querys" :key="index" :gutter="16" :xs="24">原创 2022-03-07 13:50:46 · 1089 阅读 · 1 评论 -
vue使用clipboard.js 《一键复制》
安装npm install clipboard --savevue项目我们可以对其进行简单的处理我们可以在项目目录下utils(没有新建)新建一个 clipboard.js文件import Clipboard from 'clipboard' //引入cliboardimport { ElMessage } from 'element-plus' //消息提示function clipboardSuccess(msg) { ElMessage.success(msg || '..原创 2021-11-11 15:09:16 · 1942 阅读 · 0 评论 -
element-upload 上传图片限制文件格式、大小以及隐藏上传框
废话不多说 先看效果代码如下:<template> <div> <div> <el-upload class="avatar-uploader" :action="upUrl" :on-success="handleAvatarSuccess" list-type="picture-card" :before-upload="beforeAvatarUplo原创 2021-07-13 17:15:54 · 1337 阅读 · 0 评论 -
Element-UI的Table组件解决换页后序号重新从1开始的问题
问题:使用了el-table,设置indx属性显示数据的行号后,发现第二页的序号还是从1开始排序解决:设置一个count方法,在换页后重新计算表格行号 <el-table-column label="ID" type="index" :index="count" />在method方法中添加以下方法:count(index) { return (this.currentPage - 1) * this.pageSize + index转载 2021-04-14 10:57:55 · 1051 阅读 · 0 评论 -
element el-table组件实现列表自动滚动
效果图:需要配合vue-seamless-scroll插件安装命令行执行:npm install vue-seamless-scroll --save然后在main.js文件里面引入使用:import scroll from 'vue-seamless-scroll'Vue.use(scroll)代码:<template> <div class="min"> <div style="display: inline-bloc原创 2021-01-29 16:19:24 · 4482 阅读 · 6 评论 -
关于VUE + Element 侧边栏页面刷新后不高亮显示的问题
写后台管理系统 我们会经常用到element,侧边栏导航的时候路由跳转没有问题 但之后页面刷新发现侧边栏的选中状态(高亮显示)没有了,针对这个问题特别提出以下见解:直接贴代码:<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" text-color="#333"原创 2021-01-25 09:26:33 · 1013 阅读 · 0 评论 -
VUE + Element-UI 使用el-table 如何实现表头文字加文字说明
先看效果:当鼠标放到“❓”上面是,弹出一个小框进行提示:代码如下:给 el-table-column 添加:render-header="renderHeader"然后在methods 方法中这样写: // 表头增加提示 // render 事件 renderHeader(h, { column }) { return h("div", [ h("span", column.label), h( ...原创 2021-01-21 18:19:38 · 3298 阅读 · 0 评论 -
VUE + element使用 el-table 组件实现不同的状态值显示不同的颜色?
先看想要的效果:因为现在从后台请求的数据都是离线的。所以都是红色,如果有在线的 ,字体需要变成绿色直接代码附上: <el-table-column prop="temperatureStatus" label="状态"> <template scope="scope"> <span v-if="scope.row.temperatureStatus == '正原创 2021-01-21 18:10:14 · 2497 阅读 · 0 评论 -
VUE + Element-UI 使用Cascader 级联选择器,后端返回的字段和我们需要的不一致怎么办?
我们先看Cascader 级联选择器 官方文档提供的数据格式: options: [ { value: "zhinan", label: "指南", children: [ { value: "shejiyuanze", label: "设计原则", children: [ {.原创 2020-11-09 10:36:36 · 4054 阅读 · 1 评论 -
关于vue+element-ui项目Pagination的分页,返回默认显示第一页的问题
先看问题效果:当我页面展示在第三页的时候,我点击某一列的信息详情,返回回来直接到第一页?这显然不是我想要的效果。我们期望的效果是:详情页返回回来后 还是在第三页。出现这种问题该怎么解决呢?(直接贴代码) <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="messageLis.原创 2020-11-06 16:01:53 · 4857 阅读 · 4 评论 -
VUE + ElementUi 表格实现单元格内容显示固定字数且超出省略号显示
在项目中我可能会遇到表格单元格内容过多的问题,那么如何将该列单元格格式化,只让它显示几个字呢? 就像这样。。我们可以给当前单元格设置 :formatter 属性,用来格式化内容 Function(row, column, cellValue, index) <el-table-column prop="messageContent" label="发布内容" width="300" :formatter="stateFormat"></el-table-colu..原创 2020-11-06 15:22:31 · 6599 阅读 · 8 评论 -
elementUI的时间选择器-选择日期范围,选择时间后获取时间的格式问题
选择日期范围:value-format="yyyy-MM-dd"//加上这行代码,不然获取的时间格式用不了 <el-date-picker v-model="tablesForm.options.attendanceDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" c..原创 2020-11-03 14:10:16 · 1432 阅读 · 0 评论 -
Element-UI 项目中 Pagination 分页如何使用 ???
先看效果:应用场景: 一般分页功能多用于一些数据量较大的信息展示页面,通过分页可以设置每页的显示数量。多用于和el-table结合使用!属性参数 说明 类型 可选值 默认值 small 是否使用小型分页样式 boolean — false background 是否为分页按钮添加背景色 boolean — false page-size 每页显示条目个数,支持 .sync 修饰符...原创 2020-10-09 15:06:15 · 7728 阅读 · 0 评论