关于element-ui 中步骤条的深度使用(一)

项目采用技术：vue2.0+webpack+element-ui

本次记录技术：el-steps

需求：实现界面的三个步骤条的界面切换，且能实现页面自动跳转到第一条校验不通过的表单项（若此表单项在第几页，则跳转到第几页）。

首先引入element-ui ,在项目的入口文件通常为（main.js），引入样式：

import Element from 'element-ui'; // 引入element-ui组件
import 'element-ui/lib/theme-chalk/index.css'; // 引入element-ui的样式

在上面需求的页面定义步骤条数据，引入步骤条组件：

定义步骤条数据

active: 0, // 控制步骤条及填写条目的显示
stepData: [{index: 0, title: '步骤1', icon: 'el-icon-edit'},
           {index: 1, title: '步骤2', icon: 'el-icon-edit'},
           {index: 2, title: '步骤3', icon: 'el-icon-edit'}],
nextTile:'下一步',

引入步骤条组件
<el-steps :active="active" simple>
<el-step :title="item.title" :icon="item.icon" @click.native ="stepClick(item.index)" v-for="item in stepData" :key ="item.index"></el-step>
</el-steps>

完成三个页面，我才用的方法是写三个div

<el-row  class = "active0" v-show="active === 0" >
  <div >
    <img src="static/image/data-catalog/catalog-icon1.png"/> 基本属性
  </div>
</el-row>

<el-row class = "active1" v-show="active === 1" > <div > <img src="static/image/data-catalog/catalog-icon1.png"/> 常规属性 </div>
</el-row>

<el-row class = "active2" v-show="active === 2" > <div > <img src="static/image/data-catalog/catalog-icon1.png"/> 可选属性 </div>
</el-row>

在设置一个下一步按钮

<el-button type="primary" plain size="medium"
           @click="nextClick()">{{nextTile}}
</el-button>

通过v-show来判断让其中哪一个显示。

下一步，通过点击事件改变active的值

// 步骤条点击事件（因为lement-ui步骤条本身不支持点击事件，所以需要@click.native，来调用原生方法）
stepClick (val) {
  var _that = this;
  _that.active = val;
},
nextClick () {
  var _that= this;
  console.log(_that.active);
  if (_that.active < 3) {
    _that.active ++ ;
    console.log(_that.active);
  } else {
    _that.active = 0;
  }
}

关于如何进行校验，此处不再赘述，网上一百度一大把，下一步实现需求中的校验不通过的跳转：

1.提交方法中

Submit(val) {
  var _that = this;
  this.$refs['Form'].validate((valid) => {
// 校验通过后，你想实现的下一步操作
    } else {
      _that.focusToError();
    }
  });
},

优化前：
focusToError () {
  setTimeout(() => {
    var firstStep = document.getElementsByClassName('active0');
    var isFirstStepError = firstStep[0].getElementsByClassName('is-error');
    var secondStep = document.getElementsByClassName('active1');
    var isSecondStepError = secondStep[0].getElementsByClassName('is-error');
    var thirdStep = document.getElementsByClassName('active2');
    var isThirdStepError = thirdStep[0].getElementsByClassName('is-error');
    if(isFirstStepError.length>0){
      this.active = 0;
      if (isFirstStepError[0].querySelector('textarea') != null) {
        isFirstStepError[0].querySelector('textarea').focus();
      } else {
        isFirstStepError[0].querySelector('input').focus();
      }
      return;
    }
    if(isSecondStepError.length>0){
      this.active = 1;
      if (isSecondStepError[0].querySelector('textarea') != null) {
        isSecondStepError[0].querySelector('textarea').focus();
      } else {
        isSecondStepError[0].querySelector('input').focus();
      }
      return;
    }
    if(isThirdStepError.length>0){
      debugger
      this.active = 2;
      if (isThirdStepError[0].querySelector('textarea') != null) {
        isThirdStepError[0].querySelector('textarea').focus();
      } else {
        isThirdStepError[0].querySelector('input').focus();
      }
    }
  }, 1);
  return false;
},

优化后

focusToError () {  setTimeout(() => {
    this.errorStepPage('active0', 0);
    this.errorStepPage('active1', 1);
    this.errorStepPage('active2', 2);
  }, 1);
  return false;
},
// 初始化校验不通过跳转情况
errorStepPage: function (activeClassName, page) {
  var errorStep = document.getElementsByClassName(activeClassName);
  var Error = errorStep[0].getElementsByClassName('is-error');
  if(Error.length>0){
    this.active = page;
    if (Error[0].querySelector('textarea') != null) {
      Error[0].querySelector('textarea').focus();
    } else {
      Error[0].querySelector('input').focus();
    }
    return;
  }
},

 

至此，需求已经实现，现在唯一的一点儿不太友好的是：鼠标放在步骤条上，没有手型提示。

此时最简单的方案：

<style>
  .el-steps--simple {
    cursor: pointer;
  }
</style>