Element-ui实践
Ypromise-
一位GIS前端开发者
展开
-
el-table 表头fixed固定某列自定义(添加按钮事件)
<!--在要自定义的el-table-column里 添加 render-header函数 --><el-table-column fixed="right" width="120" :render-header="renderBtn"> <template slot-scope="scope"> <div style="background: #063b6c; width: 120px"&g.原创 2021-10-20 15:14:47 · 644 阅读 · 0 评论 -
el-form表单el-form-item验证规则里prop一次验证两个或多个值
需求要在表单的el-form-item 一次验证两个值,都不能为空图示:下图是圈起来的地方是我吗要验证的第一个值方法在验证规则rules里,要验证的值里加上validator验证规则,“valTowValue”是自己定义的。紧接着在data下定义validator验证规则。如果一个el-form-item里要验证多个,方法同理,在valTowValue里多判断几个就行了。...原创 2021-06-04 17:46:32 · 11554 阅读 · 2 评论 -
解决el-table表头错位
示例图:表头错误错位原因一般是由电脑显示的缩放引起解决方案(两种)在app.vue 或者 index.html 反正是根结构处,修改全局样式style加入样式代码 .el-table th.gutter{ display: table-cell !important;}加入样式代码.el-table--border th.gutter:last-of-type { display: block!important;}结果:...原创 2021-06-02 14:54:28 · 649 阅读 · 0 评论 -
Element UI Dialog 可拖拽移动
效果:是可移动的。步骤1.新建文件 directives.jsimport Vue from 'vue'; // v-dialogDrag: 弹窗拖拽属性Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header'); const dragDom = el.q原创 2021-02-01 10:35:17 · 2348 阅读 · 0 评论 -
vue element 实现表格table联动数据的分页功能
原文链接:https://blog.csdn.net/weixin_44863676/article/details/102545387原创 2020-08-07 10:56:11 · 2054 阅读 · 0 评论 -
vue 简单二级联动选择 select二级节点选择
本文用的是element-ui 的 select选择组件,简单写一个地区选择,其他用法也相同, 适用于已经知道枚举值的// templete 里<el-form-item label="区域" prop="projectDivision"> <el-select v-model="ruleForm.projectDivision" pl原创 2020-08-05 14:55:48 · 3134 阅读 · 0 评论 -
vue中 下拉框打印输出有值,但是选中后框里不显示
代码写法没毛病的情况下:原因:是因为下拉框数据是v-for接口请求来的数据,因为数据层次太多,render函数没有自动更新解决方法:在@chenge事件里手动强制刷新值// areaChange1 change的事件名areaChange1(){ // console.log(2) this.$forceUpdate()//强制更新 }转载于:https://blog.csdn.net/weixin_43835827/article/details/105677387...原创 2020-08-05 14:39:07 · 1418 阅读 · 0 评论 -
vue tab标签页动态增减 content换成组件形式 前面两个标签页不能删减
@TOCtab动态增减vue tab标签页动态增减 content换成组件形式这里使用的element-ui组件里的tab标签页,其他组件也是万变不离其宗首先,根据官方文档里引入tab组件// template里<div style="margin-bottom: 20px;"> <el-button size="small" @click="addTab(tabNameValue)" &g原创 2020-07-17 10:53:02 · 2431 阅读 · 1 评论 -
element-ui 使用表格布局切换表格渲染错乱或者掉下来一点
踩坑:使用表格的时候,切换表格表格的最左边固定列竟然掉下来一点,有时候又是正常的,查了资料,解决办法如下this.$nextTick(()=>{ this.$refs.tableRef.doLayout()})// table的ref为tableRef,更新渲染表格的数据后执行上面代码doLayout重新布局表格原文链接:https://blog.csdn.net/lydxw...原创 2020-01-08 18:28:38 · 2286 阅读 · 0 评论 -
Vue图片放数组获取或者后台获取,功能列表
(给以后的自己留方便)最近做个小功能,要求写个功能列表,图片从数组获取,用循环来写。(也可用于图片轮播)一开始也是遇到数组里的图片出不来,后来这样就出来了:功能列表的布局,主要用的是element-ui的popover组件。图片数组:用require请求图片(我这是本地)在循环里绑上 :src图片就出来啦效果图:最后贴上css:如果只有两排功能,是不出现滚动的!...原创 2019-12-03 16:30:05 · 3950 阅读 · 0 评论