![](https://img-blog.csdnimg.cn/20210115140419208.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Element
以实战为索,逐步深入Element各个环节,掌握Element项目所遇到的问题
阳光的男夹克
心软的人没遇到 小火慢炖的粥掺了水
展开
-
vue3+ts+element-plus 标签红色波浪形(属性不全)
在 TypeScript 中,使用 typeof 关键字可以用来获取一个值的类型。在这个特定的声明文件中,typeof ElButton 的作用是告诉 TypeScript 编译器,ElButton 的类型应该被认为是和 element-plus 库中的实际 ElButton 类型相同。这样做的好处在于,当您在编写代码时使用了 element-plus 中的 ElButton 组件,TypeScript 将能够正确地进行类型检查和推断,以及提供相关的类型提示。原创 2024-06-01 12:31:37 · 313 阅读 · 0 评论 -
Vue Element 表格实现拖拽排序
1、安装sortablejs2、在需要的页面引入3、具体使用,注意的是element table务必指定row-key,且row-key必须是唯一的,如 id,不然会出现排序不对的情况原创 2022-06-28 16:09:43 · 4722 阅读 · 0 评论 -
Element 表格内的 Popover 弹出框可以任意拖动位置
在Element 表格内的 Popover 弹出框,实现可以任意拖动位置,主要参数 trigger=“manual” 为了实现点击空白处不能隐藏,popper-class 动态添加 calss,ref 定义 ref 控制 Popover 显示隐藏<el-table-column prop="pageName" label="来源" header-align="center" align="left" show-overflow-tooltip width="160"> <tem原创 2022-03-21 12:05:02 · 2057 阅读 · 0 评论 -
Element 树表格有无子节点内容都对齐
添加 :cell-style=“cellStyle” 方法<el-table :cell-style="cellStyle" v-sticky="{top:56}" :indent='indents' :key="Math.random()" row-key="LAND_LIST_ID" :expand-row-keys="expand" :tree-props="{children: 'children'}" :data="tableData" border stripe size="small"原创 2022-03-09 15:52:39 · 679 阅读 · 0 评论 -
Element 标签页样式修改
/deep/ .el-tabs__nav-wrap::after { height: 1px;}/deep/ .el-tabs__item { height: 50px; font-size: 16px; font-family: PingFang SC; font-weight: 400; color: #727171;}/deep/ .el-tabs__item:hover{ color: #C8291C;}/deep/ .el-tabs__item.is-act原创 2022-01-13 17:15:59 · 658 阅读 · 0 评论 -
element-ui 解决 el-select 设置默认值后无法切换选项
原因:select已经绑定了值,render函数没有自动更新,数据刷新了但是视图没有刷新解决方法:使用this.$forceUpdate()重新render<el-select @change="selectChange" size="small" v-model="ruleForm.periods" placeholder="请选择评定期数"> <el-option v-for="item in options" :key="item.id" :label原创 2021-12-27 16:42:29 · 847 阅读 · 0 评论 -
Element 表头换行方法
添加 width 使表头达到换行的宽度<el-table-column width="80px" :label="'计划投资\n(万元)'" align="center" show-overflow-tooltip></el-table-column>原创 2021-12-14 15:48:50 · 1210 阅读 · 0 评论 -
Element 指定内容换行
基础布局<el-table-column show-overflow-tooltip align="right" header-align="center" prop="MILEAGE" :label="'里程\n(公里)'"></el-table-column>添加以下样式即可/deep/ .el-table thead { white-space: pre-line;/*保留换行符*/}...原创 2021-11-15 09:52:38 · 1455 阅读 · 0 评论 -
Element 表格添加合计行、合并合计行
效果如下table 添加属性 span-method 以及 ref<template> <el-table ref="table" :span-method="arraySpanMethod" :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" widt原创 2021-11-11 15:57:01 · 1846 阅读 · 2 评论 -
Element tree设置滚动条
只需添加以下样式即可<style scoped>/deep/ .el-tree { width: 100%; height: 100%; overflow: auto;}/deep/ .el-tree>.el-tree-node { display: inline-block; min-width: 100%;}</style>原创 2021-11-01 18:22:57 · 657 阅读 · 1 评论 -
Element tree设置默认展开及选中
设置默认展开,将default-expanded-keys的值设为node-key的值对应的数组即可<el-tree ref="tree" node-key="code" :default-expanded-keys="[1]" :data="treeData" :props="defaultProps"></el-tree>设置默认选中this.$nextTick(() => { this.$refs.tree.setCurrentKey(1)})注:此处 1原创 2021-11-01 17:44:29 · 3255 阅读 · 0 评论 -
Element table 表格实现单选
创建表格 添加 @select-all=“selectAll” @select=“selectAnalysis” ref=“multipleTable”<el-table @select-all="selectAll" ref="multipleTable" @select="selectAnalysis" v-loading="loadingAnalysis" style="margin-top: 10px" height="350px" :data="analysisData" border原创 2021-09-27 15:56:42 · 1343 阅读 · 0 评论 -
Element Tree 复选框获取选中的节点
Element Tree 复选框获取选中的节点,只需要在 @check-change 事件时调用 his.$refs.tree.getCheckedNodes() 方法就可以了,el-tree 组件需要设置 ref=“tree”<el-tree :filter-node-method="filterNode" :default-expanded-keys="defaultExpandedKeys" :default-checked-keys="defaultCheckedKeys" node-key原创 2021-08-05 13:05:30 · 3174 阅读 · 0 评论 -
Element Tree 修改节点颜色
Tree 试验插槽,给定 slot-scope="{data}",通过 data 的状态设置节点颜色,slot 又两个参数 data,node<el-tree lazy ref="tree" node-key="id" :props="props" :load="loadNode" v-if="treeState" highlight-current :expand-on原创 2021-08-03 17:56:37 · 2052 阅读 · 0 评论 -
Element 表单重置
Element 表单重置的时候发现,不能把表单绑定的数据重置为空,这是因为我们在给表单绑定数据的操作其实是在created 进行绑定的,而 Element 的表单重置是重置为munted时候的值,因此我们只需要把操作在 munted 时候执行就可以了this.$nextTick(()=> { this.formData.name = value.label; this.formData.proType = value.otherInfo.proType;})...原创 2021-08-02 09:30:13 · 1058 阅读 · 0 评论 -
Element el-tree 树组件中横向滚动条显示问题
出现该问题的原因是el-tree组件中class名为el-tree的div是块级元素,需要把它变为inline-block.el-tree { display: inline-block!important;}原创 2021-06-13 19:37:51 · 581 阅读 · 0 评论 -
ElementUI实现异步加载树
<el-tree ref="tree" :data="data" lazy show-checkbox node-key="id" check-strictly :load="loadnode" :props="defaultProps" @node-click="nodeclick"></el-tree>export default { data() { return {原创 2021-03-31 12:16:33 · 874 阅读 · 0 评论 -
Element 表格进入页面合计行不显示
只需给 table 设置 ref=“table”,并在 Vue 生命周期 updated 执行以下方法updated() { this.$nextTick(() => { this.$refs.table.doLayout(); })},原创 2020-11-02 10:03:06 · 441 阅读 · 0 评论 -
Element 表格修改边框颜色
实现效果 设置表格边框需要分三个部分设置 即头部 单元格以及最外层边框头部 设置 使用 :header-cell-style="{color:‘black’,borderColor:‘black’}" 以及 size=“small” 并添加方法:cell-style=“cellStyle”<el-table border size="small" :data="tableData"原创 2020-10-16 10:33:31 · 8250 阅读 · 3 评论 -
Element 表格内添加 Switch 开关
实现效果主要就是使用了 slot-scope=“scope” 给开关的 v-model 绑定的值为当前行的 scope.row.qStatus<template> <el-table @row-click="rowShowInput" style="margin-top: 10px" height="300px" :data="detectionData" border stripe size="small" :header-cell-style="{background:原创 2020-10-13 16:25:44 · 2030 阅读 · 1 评论 -
Element-ui中的表格el-table滚动条样式修改
效果:不兼容IE /*滚动条的宽度*/ /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 6px; height: 6px; } /*滚动条滑块*/ /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #ddd; /*border-radius: 3px;*/ }...原创 2020-09-30 13:55:15 · 2897 阅读 · 0 评论 -
Element Drawer 抽屉改变默认宽度
Drawer 抽屉 默认宽度为30%,想要改变宽度只需要使用 :size=“size” 给组件传值就可以了<el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" :size="size"> <span>我来啦!</span></el-drawer>data() { return { size: '400px' };}...原创 2020-09-25 12:41:18 · 15485 阅读 · 5 评论 -
Element 动态合并列
合并列 使用方法 :span-method=“objectSpanMethod” 要想实现动态合并需要给每一行都设置合并的列数,因为Element的合并是每一行都会执行 所有不需要合并的行也要设置为0数据结构:[1,5,0,0,0,0,0,5,0,0,0,0,0,2,0,0,6,0,0,0,0,0,0] 其实1 5 5 2 6 就是合并的列数,0其实就是5的位置,已经被5合并 但是Element每一行都会执行,所有要为他设置成0,并且设置colspan为0,隐藏// 基础布局<el-table原创 2020-09-22 17:01:51 · 1717 阅读 · 0 评论 -
Element 报错 dateStr.match is not a function“
这个错误是因为Element 的日期组件的数据类型不能为Number解决办法:把数据转换为字符串val date = toString(12);原创 2020-09-18 18:38:29 · 35605 阅读 · 0 评论 -
Element 树组件使用及换肤 - 同步
Tree// 基础布局<div class="treeStyle" style="height:100%"> <el-tree ref="tree" default-expand-all highlight-current :data="treeData" :props="defaultProps" node-key="id" @node-click="handleNodeClick" style="height:99%"> </el-t原创 2020-09-16 16:48:37 · 192 阅读 · 0 评论 -
Element 折叠面板 Collapse 改变箭头方向 默认90°
效果 折叠面板改变箭头方向 默认90° 点击为-90°只需要添加样式<style scoped> // 点击后方向 /deep/ .el-collapse-item__arrow.is-active { transform: rotate(-90deg);; } // 默认方向 /deep/ .el-collapse-item__arrow, .el-tabs__nav { transform: rotate(90deg)原创 2020-09-14 11:41:34 · 2938 阅读 · 1 评论 -
Element下拉框渲染
列表<el-table-column width="200px" prop="modelType" label="测试" align="center" show-overflow-tooltip> <template slot-scope="scope"> {{getUnitData(scope.row.modelType)}} </template></el-table-column>方法一//this.option原创 2020-09-06 21:12:04 · 665 阅读 · 0 评论 -
Element行内编辑
布局 点击行方法@row-click=“rowShowInput” 使用selectData 控制<el-table @row-click="rowShowInput" style="margin-top: 10px" height="500px" :data="tableData2" border stripe size="small" :header-cell-style="{background:'#ECF5FF',color:'#606266',fontWeight:'bold',alig原创 2020-09-06 21:12:32 · 541 阅读 · 0 评论 -
Axios获取远端图片Element 二进制流
获取远端图片 下载this.axios({ method:'get', url:'http://bit.ly/2mTM3nY', responseType:'stream'}) .then(function(response) { response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))});前端显示二进制流地址图片<el-popover style="margin: 0px 10px" trigger="原创 2020-09-06 21:15:18 · 648 阅读 · 0 评论 -
基于 Element 的城市级联选择器组件 同步
城市数据 获取的是高德地图行政区域数据,需要申请自己的key,因是第三方api,存在跨域,使用了vue-jsonp,不存在跨域的话可以正常使用axios请求高德api地址:https://lbs.amap.com/api/webservice/guide/api/district1、安装vue-jsonpnpm i vue-jsonp --save2、main 引入注册import VueJsonp from 'vue-jsonp'Vue.use(VueJsonp)基本布局<tem原创 2020-09-06 21:15:45 · 419 阅读 · 0 评论 -
Element UI table表格组件错位问题
重新计算Element布局this.$nextTick(() => { this.$refs.table.doLayout(); });原创 2020-09-07 09:09:45 · 790 阅读 · 0 评论 -
Element自定义校验规则
基础布局<el-form-item label="电话" prop="phone"> <el-input v-model="formData.phone"></el-input></el-form-item>validator// 验证手机号的规则data() { var checkMobile = (rule, value, callback) => { // 验证手机号的正则表达式 const regMobile = /^1[原创 2020-09-08 15:11:42 · 2242 阅读 · 0 评论 -
Element 报错 Cannot read property ‘setCurrentRow‘ of undefined element
这个错误是因为你的dom元素还没有加载完,就使用了 setCheckedKeys 。也就是你写的this.$refs.monthlyPlanTable.setCurrentRow(this.tableData[0]); 这个里面的 monthlyPlanTable还没有加载出来。解决方案:this.$nextTick(() => { if( this.tableData.length > 0){ this.$refs.monthlyPlanTable.setCurrentRo原创 2020-09-10 16:59:07 · 3144 阅读 · 0 评论 -
Element设置某一行选中
遇到问题请查看 博客// 基础布局 核心参数 ref highlight-current-row<el-table ref="monthlyPlanTable" highlight-current-row> <el-table-column prop="name" label="测试" align="center"></el-table-column>/el-table>// 方法 核心参数setCurrentRow this.$nextTickthi原创 2020-09-10 17:03:18 · 1401 阅读 · 0 评论