最近有个需求，最开始列表数据是通过新增按钮一条条添加的，但是部分数据量可能上百条，客户自己手选会很慢，所以产品经理给了个需求要求可以通过上传excle文件进行导入。经过网上查询及涉及自己项目，实现了此功能。第一步：安装插件，我安的是0.16.0；原因是默认安装版本编译会有点问题，经过搜索后发现安装此版本后解决。npminstallxlsx@0.16.0--save第二步：vue页面中导入XLSX依赖importXLSXfrom'xlsx'第三步：页面展示上传文件第四步：核心代码js//上传导入excle文件asyncimportExcel(file){consttypes=file.name.
解决办法在el-dialog标签里添加:modal-append-to-body=‘false’问题分析 先来看看element-ui官网提供的属性说明文档文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body='true'(默认)属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级），知道这个原理就好办了:append-to-body='true'或者:modal-append-to-body='false'像这样：问题分析：经过分析源码可以知道，el-dialog的显示层和遮罩层都设置了position:fixed，当
el-table改变行高row-style行的style的回调方法，也可以使用一个固定的Object为所有行设置一样的Style。cell-style单元格的style的回调方法，也可以使用一个固定的Object为所有单元格设置一样的Style。header-row-style表头行的style的回调方法，也可以使用一个固定的Object为所有表头行设置一样的Style。header-cell-style表头单元格的style的回调方法，也可以使用一个固定的Object为所有表头单元格设置一样的Style。主要这4个属性关系到表格行和表格头的行高将row相关属性中的height设置为0将cel
今天，写项目时，有一个table作为筛选的载体，需要选中table里面的一条数据，我想了一下，用table里面的selection功能，实现单选功能。exportdefault{data(){return{tableData:[{name:'王小虎1',province:'上海1',},{name:'王小虎2',province:'上海2',},{name:'王小虎3',province:'上海3',},{name:'王小虎4',province:'上海4',}],}},mounted(){},methods:{onSelectAll(){this.$refs.multipleTable.cl
项目中需要自定义el-steps的图标同时完成时图标也要进行修改，记录一下，有写的不好的地方欢迎大佬们指正:实现步骤：首先在templete部分：el-step中添加一个插槽slot=“icon”，为其添加类名，以便于修改样式el-stepsclass="handlerSteps">el-step@click.native="scrollToTop('build')":status="flag_build?'success':'wait'"title="立项">iclass="buildstepIcon"slot="icon">i>el-step>el-step@click.native="s
效果图： 1. 【合并行】通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。:span-method="objectSpanMethod"spanNumArr:[],//合并行数posNum:[],//记录位置created(){//获取合并行行数this.getSpanNumArr(this.t
使用element-uiDatePicker日期选择器，选中日期是2021-08-02至2021-08-03，浏览器中日期的值是2021-08-01T16:00:00.000Z和2021-08-02T16:00:00.000Z；所以确定是由于时区导致的日期不一致，解决办法就是在日期控件中加入value-format=“yyyy-MM-dd”，问题解决el-date-pickervalue-format="yyyy-MM-dd"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期">el-date-picker>
关于Element-UIel-select多选下拉菜单表单校验问题 在使用el-select多选下拉菜单配置表单校验时，如果form表单绑定的form对象对应属性值为空字符串或者null（其他未尝试），表单中的多选下拉框会立刻执行校验并弹出校验信息，代码如下：el-form:model="form":rules="settingFormRules">el-form-itemprop="level">spanslot="label">级别spanstyle="color:#B9BBC4">（支持多选）span>span>el-selectv-model="form.level"multipl
1.背景：在公司开发需求中有一个选择颜色的单选框（黑色，白色），每种颜色选择后均支持取消选中，可是el-radio标签不支持取消选中。2.解决：方法1: 黑色白色clickitemdataType(e){//e为radio的label值e===this.radioColor?this.radioColor='':this.radioColor=e},方法2:换checkbox，设置max=1即可data(){return{checkList:['A']}}
我们先看看官方文档： 步骤一：在每个el-tab-pane中间加个name属性 步骤二：在el-tabs标签里绑定属性v-model="activeTab"，activeTab是随便自己设置的名称。步骤三：在data数据里面存储你在el-tabs标签里绑定属性v-model所对应的参数名activeTab此时我设置的activeTab:'body',那么此时就是默认激活的标签页是el-tab-pane标签里面的name="body"的标签页，也就是请求体这个标签页。下面上传源代码，让大家自己尝试一下哈。
