element-ui中Steps步骤条和Tabs标签页关联
2020-12-06 20:25
2867 查看
步骤条和标签页的简单关联
1.步骤条:
步骤条的
acitve属性用来设置当前激活的步骤,类型为
number
<el-steps :active="active - 0" finish-status="success"> <el-step title="步骤 1"></el-step> <el-step title="步骤 2"></el-step> <el-step title="步骤 3"></el-step> </el-steps>
2.标签页:
标签页的
v-model属性绑定选项卡中的
name值,类型为
string
<el-tabs :tab-position="tabPosition" style="height: 200px" v-model="active"> <el-tab-pane name="0" label="用户管理">用户管理</el-tab-pane> <el-tab-pane name="1" label="配置管理">配置管理</el-tab-pane> <el-tab-pane name="2" label="角色管理">角色管理</el-tab-pane> </el-tabs>
3.让两者关联,只需要将
active和
v-model绑定同一个变量即可,但是前者是
number,后者是
string,所以在步骤条的
active的值上减个0就好了
相关文章推荐
- element中Steps步骤条和Tabs标签页关联的解决
- 当在vue项目中引入element-ui或iview的Tabs标签时显示异常的解决方案
- 实现elementUI表单的全局验证的方法步骤
- Vue 使用element-ui步骤条流程
- window系统下安装element-ui:Vue下面安装Element 的详细步骤(附测试案例)
- element-ui如何防止重复提交的方法步骤
- 给element-ui的steps加@click.native事件
- vue+elementUI搭建环境步骤(简化版)
- liferay-ui:tabs 标签的嵌套使用
- Vue + Elementui实现多标签页共存的方法
- UI标签库专题五:JEECG智能开发平台 Tabs(选项卡父标签)
- elementUI el-tabs 控件设置点击 闪屏问题
- Vue Element UI 实现文件excel的上传及下载2种方式(文件流及a标签)
- vue2.0+Element-ui应用【Table表格 不同的数据匹配不同的Tag标签】
- vue elementUI使用tabs与导航栏联动
- element-ui根据一列的某个标签值将超链接置灰。
- 如何去掉element-ui中,tabs中el-tab-pane切换时的下划线
- element-ui中级联标签过大问题
- VUE+Elementui Tabs被点击时不会高亮显示问题
- element-ui中将checkbox与input框进行关联