随笔分类 - element-ui
摘要：1、正常情况下，在一次事件中调用多次通知，会出现重叠 DOM <el-button type="primary" plain @click="doNotify">弹出通知叠加</el-button> js doNotify() { for (let i = 0; i < 3; i++) { this
阅读全文
摘要：公司维护的项目使用的是elementUI最早的1.x版本的，文本域不支持show-word-limit属性 解决： <el-form-item label="申请理由"> <el-input v-model="formData.applycontent" type="textarea" :autos
阅读全文
摘要：限制区间30天： pickerMinDate: '', pickerOptions: { onPick: ({ maxDate, minDate }) => { this.pickerMinDate = minDate.getTime() if (maxDate) this.pickerMinDat
阅读全文
摘要：效果： 使用 show-overflow-tooltip 无法设置hover状态时的样式，改用 el-tooltip 1、 <el-table-column label="核心使用场景" min-width='300'> <template scope="scope"> <el-tooltip ef
阅读全文
摘要：效果： 1、设置 render-header <el-table-column prop="levelname" label="层次" width="180" show-overflow-tooltip :render-header="renderTableHeader" /> 2、renderTa
阅读全文
摘要：优化点：选中的年份由父组件传入，不传即默认为空 step： 1、SchoolYear.vue： <template> <el-select v-model="currentYear"> <el-option v-for="item in tempYearList" :key="item.value"
阅读全文
摘要：需求： 1、封装一个下拉框组件，选择学年 2、学年list默认是组件自带，如果父组件传值了用父组件传来的 3、默认选中当前年份 step： 1、components中定义SchoolYear.vue /** * props: * yearList // select数据 格式： [{text, va
阅读全文
摘要：1、components下新建MyTable/index.vue <template> <div class="my-table"> <el-table :data='tableData' :header-cell-style='headerCellStyle'> <slot></slot> </e
阅读全文
摘要：1、打印this.$route 可以发现matched是可以提供面包屑的数据源，根据实际情况进行filter 2、在路由表（路由记录）中添加 meta const routes = [ // 第一级 { path: '/', name: 'Home', component: Home, meta:
阅读全文
摘要：1、highlight-current-row 设置css： tr.current-row > td, .el-table__body tr:hover > td { background: #f5f5f5; } 2、:row-class-name="tableRowClassName"，需要借助@
阅读全文
摘要：问题描述： 1、treeData中的两个children分别对应的页面渲染效果，区别是第一个children是treeData的二级属性，第二个children是treeData的三级属性。 2、当异步请求接口获取值的时候，二级属性成功赋值，三级属性赋值之后页面不显示： 二级children正常显示
阅读全文
摘要：1、首先定义好一个弹框，弹框代码放在最后 2、父组件中引入进来，用porps的方式传递一个show到子组件中，这种方式还可以传递其他的值过去。这种方法要注意不可以直接定义一个变量show为布尔值，然后对show进行修改，会报错的 3、还有个办法也可以打开关闭弹框，这个方法简便，不用props传值，复
阅读全文
摘要：1、问题描述：在弹框里，有个table，我本意是想着在拿到数据渲染table后，利用setCurrentRow()方法让第一行为默认选中高亮状态，这就需要操作dom，然而这个dom在这里根本拿不到，即使是加了this.$nextTick(()=>{})。 2、但是根据以往的经验，我一般关闭dialo
阅读全文
摘要：1、安装依赖： npm install -S file-saver npm install -S xlsx npm install -D script-loader 2、下载导入Blob.js和 Export2Excel.js 3、组件中使用： <div @click="outTab">导出</di
阅读全文
摘要：1、安装依赖： npm install -S file-saver npm install -S xlsx npm install -D script-loader 2、static文件夹下新建excel/Export2Excel.js （放在下面了。static中存放别人的文件，assets中存放
阅读全文
摘要：1、安装依赖： npm install --save xlsx file-saver 2、在组件中引入： import FileSaver from 'file-saver' import XLSX from 'xlsx' 3、添加导出按钮： 4、导出函数： outTab() { let fix =
阅读全文
摘要：问题描述：当dialog和v-viewer一起使用时，点击图片预览，会出现预览的图片z-index比dialog小 原因：dialog默认的z-index是2000，每次关闭后再次打开z-index会递增2左右，v-viewer的层级默认是2015，这样预览不了几次，就会出现dialog的z-ind
阅读全文
摘要：data() { let checkIDCard = (rule, value, callback) => { const IDCardReg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x
阅读全文
摘要：<template v-for="item in sliders"> <!-- 二级路由/三级路由 --> <template v-if="item.children&&item.children.length>0"> <!-- 三级路由 --> <template v-if="item.child
阅读全文
