步骤条

例子

步骤条 - 图1

  1. <avue-steps  :option="option" @change="change" @submit="submit">
  2.   <template slot="before">
  3.     <el-tag>卡槽头部{{type}}</el-tag>
  4.   </template>
  5.   <template slot="info">
  6.     <avue-form :option="item.option" v-model="form"></avue-form>
  7.   </template>
  8.   <template slot="pwd">
  9.      <avue-form :option="item.option" v-model="form"></avue-form>
  10.   </template>
  11.   <template slot="finsh">
  12.     <avue-crud :option="item.option" :data="list"></avue-crud>
  13.   </template>
  14.   <template slot="after">
  15.    <el-tag>卡槽尾部{{type}}</el-tag>
  16.   </template>
  17.    <template slot="menu">
  18.     <el-button type="primary">自定义按钮</el-button>
  19.   </template>
  20. </avue-steps>
  22. <script>
  23. export default {
  24.  data() {
  25.       return {
  26.         type:'',
  27.          form:'',
  28.          item:'',
  29.          list: [
  30.           {
  31.             money:'12.00',
  32.             date:'2018-06-06',
  33.           }, {
  34.             money:'233.00',
  35.             date:'2018-06-06',
  36.           }, {
  37.             money:'2.00',
  38.             date:'2018-06-06',
  39.           }, {
  40.             money:'3.00',
  41.             date:'2018-06-06',
  42.           }
  43.         ],
  44.          option:{
  45.             switchBtn:true,
  46.             column: [{
  47.                 label: '填写转账信息',
  48.                 prop: 'info',
  49.                 description: '用于信息的转账',
  50.                 option: {
  51.                     formWidth:'40%',
  52.                     column: [
  53.                         {
  54.                             label: "转账金额",
  55.                             span: 24,
  56.                             prop: "money",
  57.                             size: 'small',
  58.                             prefixIcon: 'el-icon-tickets',
  59.                             rules: [{
  60.                                 required: true,
  61.                                 message: "请输入转账金额",
  62.                                 trigger: "blur"
  63.                             }]
  64.                         }
  65.                     ]
  66.                 }
  67.             }, {
  68.                 label: '确认转账信息',
  69.                 prop: 'pwd',
  70.                 description: '为了安全再次确认转账',
  71.                 option: {
  72.                     formWidth:'40%',
  73.                     emptyBtn:false,
  74.                     column: [{
  75.                         label: "支付密码",
  76.                         prop: "password",
  77.                         type: 'password',
  78.                         size: 'small',
  79.                         span: 24,
  80.                         rules: [{
  81.                             required: true,
  82.                             message: "请输入支付密码",
  83.                             trigger: "blur"
  84.                         }],
  85.                     }]
  86.                 }
  87.             }, {
  88.                 label: '完成',
  89.                 prop: 'finsh',
  90.                 description: '转账信息完成',
  91.                 // icon: 'el-icon-picture-outline',
  92.                 option: {
  93.                     page:false,
  94.                     index:true,
  95.                     title:'交易记录',
  96.                     column: [
  97.                       {
  98.                         label:'金额',
  99.                         prop:'money'
  100.                       }, {
  101.                         label:'时间',
  102.                         prop:'date'
  103.                       }
  104.                     ]
  105.                 }
  106.             }]
  107.         }
  108.       }
  109.     },
  110.     methods:{
  111.       submit (next) {
  112.          next();
  113.       },
  114.       change (item) {
  115.          this.type = item.prop;
  116.          this.item = item;
  117.          this.$message.success('当前步骤数据'+JSON.stringify(item));
  118.       },
  119.     }
  120. }
  121. </script>

Avue-steps Option Attributes

参数说明类型可选值默认值
label步骤条显示名称String--
prop步骤条别名String--
description步骤条描述String--
icon步骤条图标String--
switchBtn步骤条是否可以点击Booleantrue / falsefalse
simple步骤条是否为简约模式Booleantrue / falsefalse

Avue-steps Events

事件名说明参数
change返回当前步骤的整体对象item
submit点击下一步或提交的回调(当为最后一个步骤时，无next返回)next

Avue-steps Scoped Slot

name说明
after内容之前的卡槽
brfore内容之后的卡槽
说明每个选项卡的卡槽