分类：element

2020
10-08

Element NavMenu导航菜单的使用方法

组件—导航菜单顶栏<el-menu:default-active="activeIndex"class="el-menu-demo"mode="horizontal"@select="handleSelect"><el-menu-itemindex="1">处理中心</el-menu-item><el-submenuindex="2"><templateslot="title">我的工作台</template><el-menu-itemindex="2-1">选项1</el-menu-item><el-menu-itemindex="2-2">选项2</el-menu-item><el-menu-itemindex="2-3">选项3</el-menu-item><el-submenuindex=... 继续阅读 >

2020
10-08

Element Breadcrumb 面包屑的使用方法

组件—面包屑什么是面包屑导航一般页面内容上方都会有一个路径导航，这个导航就是面包屑导航。例如：上面这个图表示我们当前的页面是Breadcrumb面包屑，上一级目录是组件页面，再上一级目录是ElementUI页面。当我们点击这些目录时会返回到对应的页面中去。再例如：上面这个图表示我们当前所在的位置是活动详情页面，上一级目录是活动列表页面…以此类推。这些就是面包屑导航。基础用法<el-breadcrumbseparator="/"><el-breadcr... 继续阅读 >

2020
10-08

Element PageHeader页头的使用方法

组件—页头基础<el-page-header@back="goBack"content="详情页面"></el-page-header><script>exportdefault{methods:{goBack(){console.log('goback');}}}</script>AttributesEventsSlots到此这篇关于ElementPageHeader页头的使用方法的文章就介绍到这了,更多相关ElementPageHeader页头内容请搜索自学编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持自学编程网！... 继续阅读 >

2020
10-08

Element Dropdown下拉菜单的使用方法

组件—下拉菜单基础用法<el-dropdown><spanclass="el-dropdown-link">下拉菜单<iclass="el-icon-arrow-downel-icon--right"></i></span><el-dropdown-menuslot="dropdown"><el-dropdown-item>黄金糕</el-dropdown-item><el-dropdown-item>狮子头</el-dropdown-item><el-dropdown-item>螺蛳粉</el-dropdown-item><el-dropdown-itemdisabled>双皮奶</el-dropdown-item><el-dropdown-itemdivided>蚵仔煎</el-dr... 继续阅读 >

2020
10-08

Element Steps步骤条的使用方法

组件—通知基础用法<el-steps:active="active"finish-status="success"><el-steptitle="步骤1"></el-step><el-steptitle="步骤2"></el-step><el-steptitle="步骤3"></el-step></el-steps><el-buttonstyle="margin-top:12px;"@click="next">下一步</el-button><script>exportdefault{data(){return{active:0};},methods:{next(){if(this.active++>2)this.active=0;}}}</... 继续阅读 >

2020
10-08

Element Dialog对话框的使用示例

组件—对话框基本用法<el-buttontype="text"@click="dialogVisible=true">点击打开Dialog</el-button><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>这是一段信息</span><spanslot="footer"class="dialog-footer"><el-button@click="dialogVisible=false">取消</el-button><el-buttontype="primary"@click="dialogVisible=false">确定</el-button... 继续阅读 >

2020
10-08

Element Tooltip 文字提示的使用示例

组件—文字提示基础用法<divclass="box"><divclass="top"><el-tooltipclass="item"effect="dark"content="TopLeft提示文字"placement="top-start"><el-button>上左</el-button></el-tooltip><el-tooltipclass="item"effect="dark"content="TopCenter提示文字"placement="top"><el-button>上边</el-button></el-tooltip><el-tooltipclass="item"effect="dark"content="TopRight提示文字"plac... 继续阅读 >

2020
10-08

Element Popover 弹出框的使用示例

组件—弹出框基础用法<template><el-popoverplacement="top-start"title="标题"width="200"trigger="hover"content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"><el-buttonslot="reference">hover激活</el-button></el-popover><el-popoverplacement="bottom"title="标题"width="200"trigger="click"content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"><el-buttonslo... 继续阅读 >

2020
10-08

Element Card 卡片的具体使用

组件—卡片基础用法<el-cardclass="box-card"><divslot="header"class="clearfix"><span>卡片名称</span><el-buttonstyle="float:right;padding:3px0"type="text">操作按钮</el-button></div><divv-for="oin4":key="o"class="textitem">{{'列表内容'+o}}</div></el-card><style>.text{font-size:14px;}.item{margin-bottom:18px;}.clearfix:before,.clearfix:after{display:table... 继续阅读 >

2020
10-08

Element Carousel 走马灯的具体实现

本文来源于Element官方文档：http://element-cn.eleme.io/#/zh-CN/component/carousel基础用法普通走马灯<divclass="block"><spanclass="demonstration">默认Hover指示器触发</span><el-carouselheight="150px"><el-carousel-itemv-for="itemin4":key="item"><h3>{{item}}</h3></el-carousel-item></el-carousel></div><divclass="block"><spanclass="demonstration">Click指示器触发</span><el-carouseltrigger="... 继续阅读 >

2020
10-08

Element Collapse 折叠面板的使用方法

本文来源于Element官方文档：http://element-cn.eleme.io/#/zh-CN/component/collapse基础用法普通折叠面板<el-collapsev-model="activeNames"@change="handleChange"><el-collapse-itemtitle="一致性Consistency"name="1"><div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div><div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div></... 继续阅读 >

2020
10-08

Element Input输入框的使用方法

本文来源于Element官方文档：http://element-cn.eleme.io/#/zh-CN/component/input基础用法带图标的输入框（属性方式）<el-inputplaceholder="请选择日期"suffix-icon="el-icon-date"v-model="input2"></el-input><el-inputplaceholder="请输入内容"prefix-icon="el-icon-search"v-model="input21"></el-input>带图标的输入框（slot方式）<el-inputplaceholder="请选择日期"v-model="input22"><islot="su... 继续阅读 >

2020
10-08

vue element 关闭当前tab 跳转到上一路由操作

方法一this.$store.dispatch('delVisitedViews',this.$route);this.$router.go(-1);方法二this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item=>item.path===this.$route.path),1)this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length-1].path)补充知识：vue+element解决点击table列表的从详情或修改页面跳转路... 继续阅读 >

2020
10-08

vue2.* element tabs tab-pane 动态加载组件操作

一、重要部分1、注意<component:is=item.content></component>：表明模板<el-tab-panev-for="(item)ineditableTabs":key="item.name":label="item.title":name="item.name"><component:is=item.content></component></el-tab-pane>2、content:'Jbxx'，其中jbxx是模板addTab(targetName,route){letnewTabName=++this.tabIndex+''this.editableTabs.push({title:tar... 继续阅读 >

2020
10-08

vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

1.表格动态添加，也可删除<template><divclass="TestWord"><el-button@click="addLine">添加行数</el-button><el-button@click="save">保存</el-button><el-table:data="tableData"style="width:100%"><el-table-columnprop="bookname"label="书名"><templateslot-scope="scope"><el-inputv-model="scope.row.bookname"placeholder="书名"></el-input></template></... 继续阅读 >

2020
10-08

vue element table中自定义一些input的验证操作

官网原话Form组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可。表单el-form表单必备以下三个属性：:model="ruleForm"绑定的数据内容:rules="rules"动态绑定的rules，表单验证规则ref="ruleForm"绑定的对象template模块其实问题关键就在于如何给el-form-item动态绑定prop:prop="'tableData.'+scope.$index+'.字段名'"<template><divclass="Tes... 继续阅读 >