![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ElementUI
前端杨小白
这个作者很懒,什么都没留下…
展开
-
ElementUI el-tabs切换之前判断是否满足切换条件 不满足条件仅提示不切换Tab
<template> <div id="header"> <el-tabs v-model="Bus.headName" class="navTab" :before-leave="beforeHandle"> <el-tab-pane label="工程1" name="first" > 工程1 </el-tab-pane> .原创 2020-06-09 14:46:01 · 5064 阅读 · 0 评论 -
ElementUI el-table遍历实现表格的自定义列【key值为列名】
<template> <div> <el-table :data="resultTable" border ref="multipleTable" tooltip-effect="light" size="mini"> <el-table-column type="index" label="序号" width="50" align="center"></el-table-column> .原创 2020-06-08 11:49:53 · 6749 阅读 · 3 评论 -
ElementUI el-step步骤条实现上一步功能
active:设置当前激活步骤 @click.native:绑定步骤条的点击事件 <template> <div id="Design"> <el-steps :active="active" align-center finish-status="success" process-status="wait" class="m-b-10"> <el-step v-for="(item,index)...原创 2020-06-05 16:24:31 · 7364 阅读 · 0 评论 -
ElementUI实现可编辑表格
实现效果:【可编辑单元格】双击某个单元格 该单元格变为input输入框 编辑修改目标单元格 ; input输入框失去焦点时 input输入框隐藏 展示默认Table<el-table :data="paramTable" border tooltip-effect="light" size="mini" @cell-dblclick="cellClick"> <el-table-column type="index" label="序号" width="50" alig.原创 2020-06-05 10:41:41 · 7161 阅读 · 9 评论 -
ElementUI-el-input无法输入
原因分析:可能是组件套用太深 vue检测不到视图更新解决方案:在失效输入框的input事件中加入this.$forceUpdate()强制刷新<el-form :model="item" label-width="85px" label-position="left" size="mini"> <el-form-item label="事件类型" prop="parent"> <el-input v-model="item.parent" @i原创 2020-06-04 17:34:13 · 1238 阅读 · 0 评论 -
ElementUI实现可拖拽dialog弹出层
v-dialogDrag: 实现可拖拽弹出层src\Utils\directives.jsimport Vue from 'vue'; Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header'); const dragDom = el.querySelector('.el-di.原创 2020-05-27 19:29:25 · 1432 阅读 · 1 评论 -
ElementUI统一修改滚动条样式
src\assets\scss\index.scss::-webkit-scrollbar { width: 5px; height: 5px;}::-webkit-scrollbar-track-piece { background-color: rgba(0, 0, 0, 0.2); border-radius: 5px; -webkit-border-radius: 5px;}::-webkit-scrollbar-thumb:vertical { height.原创 2020-05-22 10:16:38 · 3134 阅读 · 0 评论 -
ElementUI 遍历实现checkbox组件的多选全选功能
<template> <div id="situateConfig"> <el-dialog title="显示配置" width="45%" min-height="300px" :visible.sync="situateDialog" :close-on-click-modal="false"> <el-for.原创 2020-05-09 10:25:36 · 2543 阅读 · 0 评论 -
ElementUI checkbox组件中的indeterminate 状态
<el-checkbox :indeterminate="a" v-model="b">全选</el-checkbox>checkbox有三种状态全选(显示的'√'),选中部分(显示的'-'),全不选(啥都没显示)对于indeterminate和v-model绑定的a和b的值如果true true 或者 true false样式为-如果false tru...转载 2020-05-08 14:37:05 · 3211 阅读 · 0 评论 -
ElementUI 之 el-tabs添加自定义按钮
<div style='position: relative;'> <el-tabs v-model="activeName" @tab-click="handleClick" style='width:100%'> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane&...原创 2020-04-15 10:23:08 · 10402 阅读 · 0 评论 -
ElementUI 之 Cascader 级联选择器回显
级联选择器多选功能回显// 选择器赋值 去除为children空数组 traverse(arr,value) { if(arr.length){ arr.forEach(item => { Vue.set(item,"name",item.label.name) Vue.set(item,"id",item.l...原创 2020-04-03 11:24:20 · 3048 阅读 · 0 评论 -
InputNumber 计数器 连续点击一定时间内只允许执行一次
var timeoutflag = null;ratio(){ var vm=this if(timeoutflag != null){ clearTimeout(timeoutflag); } timeoutflag=setTimeout(function(){ console.log(vm.Num,"ces");//此处是一个...原创 2020-04-03 11:06:46 · 1585 阅读 · 0 评论 -
ElementUI遍历生成Form表单
<el-form ref="formAttr" :model="formAttr" label-width="80px" label-position="left" size="mini"> <template v-for="(items,key) in formAttr.Parameters" > <el-form-item :label...原创 2020-04-02 17:47:19 · 2411 阅读 · 0 评论 -
ElementUI报错 Error in callback for watcher "data": "Error: [ElTable] prop row-key is required"
前端报错Error in callback for watcher "data": "Error: [ElTable] prop row-key is required"Error: [ElTable] prop row-key is required<el-table :data="props.row.Entities" border size="mini...原创 2020-03-30 09:22:32 · 11517 阅读 · 1 评论 -
ElementUI 获取el-tree选中节点信息
树形控件<el-tree :data="entityData" show-checkbox default-expand-all @check="aaaa" ref="multipleTable" > <span class="custom-tree-node" slot-scope="{ data }"> &...原创 2020-03-27 14:11:11 · 8601 阅读 · 0 评论 -
ElementUI 获取el-table表格选中行信息及清除选中行
表格<el-table :data="tableData" border style="width: 100%" ref="multipleTable"> <el-table-column type="selection" width="40" align="center"></el-table-column> ...原创 2020-03-27 11:49:49 · 14509 阅读 · 0 评论 -
ElementUI实现手动上传
目录导航目的实现方案布局JS代码实现效果展示目的实现方案布局JS代码实现效果展示原创 2019-09-27 15:28:01 · 8925 阅读 · 8 评论 -
elementUI实现对表格批量操作
目的需求实现批量删除:将表格选中行的参数放在请求中传给后端实现方案ref=“multipleTable”this.$refs.multipleTable.selection;获取表格中被选中行的信息代码块<template> <div id="text"> <el-card class="box-card m-t-10" shadow=...原创 2019-12-07 16:28:13 · 4167 阅读 · 1 评论 -
ElementUI :el-upload调用一次接口同时上传多个文件及表单
目的el-upload组件默认情况下上传多少个文件就会请求多少次上传接口 实现请求一次接口同时上传多个文件及表单实现方案multiple 支持多选文件:auto-upload="false" 不在选取文件后立即进行上传:http-request="httpRequest" 覆盖默认的上传行为 自定义上传的实现this.$refs.upload.submit()代码实现<...原创 2019-12-09 09:35:00 · 12419 阅读 · 12 评论 -
ElementUI校验数字类型
v-model.number:限制输入时为数字类型{ type: 'number', message: '年龄必须为数字值'}:提交时校验<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm"> <el-fo...原创 2020-01-22 11:17:20 · 6219 阅读 · 0 评论 -
ElementUI 级联选择器的el-cascader校验
<el-form-item label="模型类别" prop="number"> <el-cascader v-model="newData.number" :options="modeData" :props="{ expandTrigger: 'hover' }" ></el-cascad...原创 2020-01-22 11:18:22 · 9715 阅读 · 10 评论 -
ElementUI 限制上传文件格式为dll .DLL .xml .XML
<el-upload ref="upload" multiple name="File" :action="apis.manageModel" :auto-upload="false" :http-request="httpRequest" :on-change="beforeAvatarUpload" :file-list=...原创 2020-01-22 11:19:10 · 355 阅读 · 0 评论 -
ElementUI 实现上传同名且后缀不同的两个文件
<el-upload ref="upload" multiple name="File" :action="apis.manageModel" :auto-upload="false" :limit="2" :http-request="httpRequest" :on-exceed = "cmx.fileOption.han...原创 2020-01-22 11:20:19 · 808 阅读 · 0 评论 -
ElementUI-textarea文本域高度自适应设置的方法
<el-form ref="createForm" :model="createForm" :rules="newRules" label-width="100px" label-position="left" size="mini"> <el-form-item label="描述" prop="desc"> <!-- <el-inp...原创 2020-02-05 12:56:27 · 9973 阅读 · 0 评论 -
ElementUI 监听表单有内容修改时提交执行相应操作
需求:VUE监听表单的指定字段有内容修改时提交执行相应操作;字段内容无修改提交时不执行操作<el-dialog title="实体属性" :visible.sync="entityAttr" width="35%"> <el-form ref="formAttr" :model="formAttr" label-width="80px" label-position...原创 2020-02-20 15:03:00 · 4793 阅读 · 0 评论 -
ElementUI 根据条件筛选符合条件的下拉框选项@visible-change
<template slot-scope="scope"> <el-select v-model="scope.row.value" placeholder="请选择" size="mini" @visible-change="canChange(scope.row)"> <el-option v-for="(item...原创 2020-03-03 16:22:47 · 7922 阅读 · 0 评论 -
ElementUI 表格中某项为空值时用暂无数据代替显示
<el-table :data="tableData" border style="width: 100%" ref="multipleTable"> <el-table-column type="index" label="序号" width="50" :index="indexMethod" align="center"></el-table-colum...原创 2020-03-09 13:49:18 · 12445 阅读 · 1 评论 -
ElementUI 之 Cascader 级联选择器自定义节点内容
Cascader 级联选择器:自定义备选项的节点内容,参数为 { node, data },分别为当前节点的 Node 对象和数据modeType:[{ "children": [{ "children": [{ "children": [], "label": { ...原创 2020-03-12 12:01:24 · 8767 阅读 · 0 评论 -
ElementUI 之 Cascader 级联选择器指定 value label
ElementUI 的 Cascader 级联选择器个人觉得很好用,但是对 :options="options" 里的数据格式是有特定要求的:input 框显示的值是 options 里的label 值。如果 options 的键值对不是 value label ,就需要 props 来配置。<el-cascader v-model="data" :options...转载 2020-03-11 11:38:12 · 5307 阅读 · 2 评论 -
ElementUI上传文件-限制上传文件个数
固定上传文件个数if(vm.fileList.length!==2){ this.$message.warning(`请上传有且仅有2个文件。`); return}限制上传文件个数<el-form-item label="上传文件" prop="fileList"> <el-upload ref="upload" ...原创 2020-03-11 18:06:02 · 11101 阅读 · 0 评论 -
ElementUI对表格某一行执行操作和批量操作限制
<div slot="header" > <el-row type="flex" justify="space-between"> <el-col :span="12"> <el-button size="mini" @click="down(1)">批量下载</el-button> ...原创 2020-03-11 18:10:05 · 502 阅读 · 0 评论