使用element-ui中的步骤条实现表单分步填写

最新推荐文章于 2024-08-13 00:11:49 发布
最新推荐文章于 2024-08-13 00:11:49 发布
阅读量4k 收藏 7
点赞数
分类专栏： # element
原文链接：https://www.cnblogs.com/yxyuanxiang/p/13994248.html
版权
本文介绍了一种使用Vue框架实现的工资账套配置管理系统，该系统通过分步表单的方式帮助用户便捷地完成账套的创建与维护。具体包括基本工资、补助、奖金等项目的设定，以及启用时间的选择。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

之前的添加信息都是使用基本的表单，在工资账套的添加中使用到了步骤条，实现了比较高级的分步填写表单并最终提交的效果

<template>
  <div>
    <el-container>
      <el-header style="display: flex;justify-content: space-between;align-items: center;padding-left: 0px">
        <el-button @click="dialogVisible = true" icon="el-icon-plus" type="primary" size="mini">添加账套</el-button>
        <el-button size="mini" type="success" @click="loadSalaryCfg" icon="el-icon-refresh"></el-button>
      </el-header>
      <el-main style="padding-left: 0px;padding-top: 0px">
        <div>
          <el-table
            :data="salaries"
            stripe
            v-loading="tableLoading"
            size="mini"
            @selection-change="handleSelectionChange"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="30">
            </el-table-column>
            <el-table-column
              width="120"
              prop="name"
              label="账套名称">
            </el-table-column>
            <el-table-column
              width="70"
              prop="basicSalary"
              label="基本工资">
            </el-table-column>
            <el-table-column
              width="70"
              prop="trafficSalary"
              label="交通补助">
            </el-table-column>
            <el-table-column
              width="70"
              prop="lunchSalary"
              label="午餐补助">
            </el-table-column>
            <el-table-column
              prop="bonus"
              width="70"
              label="奖金">
            </el-table-column>
            <el-table-column
              width="100"
              label="启用时间">
              <template slot-scope="scope">{{ scope.row.createDate | formatDate}}</template>
            </el-table-column>
            <el-table-column label="养老金" align="center">
              <el-table-column
                prop="pensionPer"
                width="70"
                label="比率">
              </el-table-column>
              <el-table-column
                width="70"
                prop="pensionBase"
                label="基数">
              </el-table-column>
            </el-table-column>
            <el-table-column label="医疗保险" align="center">
              <el-table-column
                width="70"
                prop="medicalPer"
                label="比率">
              </el-table-column>
              <el-table-column
                prop="medicalBase"
                width="70"
                label="基数">
              </el-table-column>
            </el-table-column>
            <el-table-column label="公积金" align="center">
              <el-table-column
                width="70"
                prop="accumulationFundPer"
                label="比率">
              </el-table-column>
              <el-table-column
                prop="accumulationFundBase"
                width="70"
                label="基数">
              </el-table-column>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <el-table-column label="编辑" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column label="删除" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
        <div style="text-align: left;margin-top: 10px" v-if="salaries!=0">
          <el-button type="danger" round size="mini" :disabled="multipleSelection.length==0" @click="deleteAll">批量删除
          </el-button>
        </div>
      </el-main>
    </el-container>
    <div style="text-align: left">
      <el-dialog
        title="添加工资账套"
        :visible.sync="dialogVisible"
        width="50%"
        @close="emptySalary"
        :close-on-click-modal="false">
        <div style="display: flex;justify-content: flex-start;">
          <el-steps :active="index" direction="vertical">
            <el-step title="基本工资" size="mini"></el-step>
            <el-step title="交通补助"></el-step>
            <el-step title="午餐补助"></el-step>
            <el-step title="奖金"></el-step>
            <el-step title="养老金"></el-step>
            <el-step title="医疗保险"></el-step>
            <el-step title="公积金"></el-step>
            <el-step title="启用时间"></el-step>
          </el-steps>
          <div style="margin-left: 30px;display: flex;justify-content: center;align-items: center;width: 80%;">
            <div v-show="index==0">
              基本工资：
              <el-input
                placeholder="请输入基本工资..."
                size="mini"
                style="width: 200px"
                type="number"
                @keyup.enter.native="next"
                v-model="salary.basicSalary">
              </el-input>
            </div>
            <div v-show="index==1">
              交通补助：
              <el-input
                placeholder="请输入交通补助..."
                @keyup.enter.native="next"
                size="mini"
                style="width: 200px"
                type="number"
                v-model="salary.trafficSalary">
              </el-input>
            </div>
            <div v-show="index==2">
              午餐补助：
              <el-input
                placeholder="请输入午餐补助..."
                @keyup.enter.native="next"
                size="mini"
                style="width: 200px"
                type="number"
                v-model="salary.lunchSalary">
              </el-input>
            </div>
            <div v-show="index==3">
              奖金：
              <el-input
                placeholder="请输入奖金..."
                size="mini"
                @keyup.enter.native="next"
                style="width: 200px"
                type="number"
                v-model="salary.bonus">
              </el-input>
            </div>
            <div v-show="index==4">
              <div>
                养老金比率：
                <el-input
                  placeholder="请输入养老金比率..."
                  size="mini"
                  style="width: 200px"
                  type="number"
                  v-model="salary.pensionPer">
                </el-input>
              </div>
              <div style="margin-top: 10px">
                养老金基数：
                <el-input
                  placeholder="请输入养老金基数..."
                  size="mini"
                  @keyup.enter.native="next"
                  style="width: 200px"
                  type="number"
                  v-model="salary.pensionBase">
                </el-input>
              </div>
            </div>
            <div v-show="index==5">
              <div>
                医疗保险比率：
                <el-input
                  placeholder="请输入医疗保险比率..."
                  size="mini"
                  style="width: 200px"
                  type="number"
                  v-model="salary.medicalPer">
                </el-input>
              </div>
              <div style="margin-top: 10px">
                医疗保险基数：
                <el-input
                  placeholder="请输入医疗保险基数..."
                  size="mini"
                  @keyup.enter.native="next"
                  style="width: 200px"
                  type="number"
                  v-model="salary.medicalBase">
                </el-input>
              </div>
            </div>
            <div v-show="index==6">
              <div>
                公积金比率：
                <el-input
                  placeholder="请输入公积金比率..."
                  size="mini"
                  style="width: 200px"
                  type="number"
                  v-model="salary.accumulationFundPer">
                </el-input>
              </div>
              <div style="margin-top: 10px">
                公积金基数：
                <el-input
                  placeholder="请输入公积金基数..."
                  @keyup.enter.native="next"
                  size="mini"
                  style="width: 200px"
                  type="number"
                  v-model="salary.accumulationFundBase">
                </el-input>
              </div>
            </div>
            <div v-show="index==7">
              启用时间：
              <el-date-picker
                v-model="salary.createDate"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd"
                style="width: 200px;"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </div>
        </div>
        <div style="display: flex;align-items: center;justify-content: center;padding: 0px;margin: 0px;">
          <el-button round size="mini" v-if="index!=0" @click="index--">上一步</el-button>
          <el-button type="primary" round size="mini" @click="next" v-text="index==7?'完成':'下一步'"></el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        tableLoading: false,
        index: 0,
        salaries: [],
        multipleSelection: [],
        salary: {
          id: '',
          createDate: '',
          basicSalary: '',
          trafficSalary: '',
          lunchSalary: '',
          bonus: '',
          pensionBase: '',
          pensionPer: '',
          medicalBase: '',
          medicalPer: '',
          accumulationFundBase: '',
          accumulationFundPer: ''
        }
      };
    },
    methods: {
      deleteAll(){
        this.$confirm('删除[' + this.multipleSelection.length + ']条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var ids = '';
          this.multipleSelection.forEach(row=> {
            ids = ids + row.id + ",";
          })
          this.doDelete(ids);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleEdit(index, row) {
        this.dialogVisible = true;
        row.createDate = new Date(row.createDate);
        delete row.allSalary;
        this.salary = row;
      },
      handleDelete(index, row) {
        this.$confirm('删除[' + row.name + ']账套, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.doDelete(row.id);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      doDelete(id){
        var _this = this;
        _this.tableLoading = true;
        this.deleteRequest("/sal/salary/" + id).then(resp=> {
          _this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.$message({type: data.status, message: data.msg});
            _this.loadSalaryCfg();
          }
        })
      },
      next(){
        var _this = this;
        if (this.index == 7) {
          if (this.salary.id) {//更新
            _this.tableLoading = true;
            this.putRequest("/sal/salary", this.salary).then(resp=> {
              _this.tableLoading = false;
              if (resp && resp.status == 200) {
                var data = resp.data;
                _this.$message({type: data.status, message: data.msg});
                _this.dialogVisible = false;
                _this.index = 0;
                _this.loadSalaryCfg();
              }
            });
          } else {//添加
            this.$prompt('请输入账套名称', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消'
            }).then(({value}) => {
              this.salary.name = value;
              this.postRequest("/sal/salary", this.salary).then(resp=> {
                if (resp && resp.status == 200) {
                  var data = resp.data;
                  _this.$message({type: data.status, message: data.msg});
                  _this.dialogVisible = false;
                  _this.index = 0;
                  _this.loadSalaryCfg();
                }
              });
            }).catch(() => {
            });
          }
        } else {
          this.index++;
        }
      },
      loadSalaryCfg(){
        this.tableLoading = true;
        var _this = this;
        this.getRequest("/sal/salary").then(resp=> {
          _this.tableLoading = false;
          if (resp && resp.status == 200) {
            _this.salaries = resp.data;
          }
        })
      },
      emptySalary(){
        this.salary = {
          id: '',
          createDate: '',
          basicSalary: '',
          trafficSalary: '',
          lunchSalary: '',
          bonus: '',
          pensionBase: '',
          pensionPer: '',
          medicalBase: '',
          medicalPer: '',
          accumulationFundBase: '',
          accumulationFundPer: ''
        };
        this.index = 0;
      }
    },
    mounted: function () {
      this.loadSalaryCfg();
    }
  };
</script>
<style>
  .el-dialog__body {
    padding-bottom: 10px;
  }
</style>

Element UI 实现分步表单：商品编辑页面开发实战 商品管理系统开发：Vue2+Element UI 多步骤表单实例 逐步完成复杂任务：基于 Vue 和 Element UI 的 Step Fo
南北极之间
12-03 1003
Element UI 实现分步表单：商品编辑页面开发实战 商品管理系统开发：Vue2+Element UI 多步骤表单实例 逐步完成复杂任务：基于 Vue 和 Element UI 的 Step Form 实践 如何用 Vue 和 Element UI 构建优雅的商品编辑页面？（完整代码） 分步表单设计与实现：商品信息编辑的最佳实践Element UI 实现分步表单：商品编辑页面开发实战 商品管理系统开发：Vue2+Element UI 多步骤表单实例 逐步完成复杂任务：基于 Vue 和 Element U
vue 3.0记录Element UI 表单使用(看了隔壁小孩儿都会用的Element UI 表单组件使用)
撑戌圆爱痒生
07-21 1384
Element UI 表单 使用 记录element ui 表单input文本域日期选择中国标准时间与xxxx-xx-xx格式时间之间的来回切换中国标准时间转换为xxxx-xx-xx格式xxxx-xx-xx格式转换为中国标准时间时间选择中国标准时间与xx:xx:xx时间格式的转换中国标准时间转换为xx:xx:xx时间格式xx:xx:xx时间格式转换为中国标准时间单选select下拉上传视频检测规则及绑定数据提交表单 element ui 表单 这次做了一个后台管理系统,用到了Element UI组件 做个记
elementui 一个dialog下的多个form表单与步骤条整合
weixin_43937851的博客
07-31 1700
elementui 一个dialog下的多个form表单与步骤条整合
element ui 实现 分步表单
weixin_53105591的博客
06-05 604
【代码】element ui 实现 分布表单。
element的步骤条整合表单（steps+form）
热门推荐
suqinyi的博客
05-12 2万+
先上效果图： element ui 组件库官网 使用步骤： 1、页面组合步骤 ==> 5步 定义出4个步骤（看你自己需要几步） 定义form表单 定义4个盒子对象active属性 => 1 到 4 放置表单项 设置上一步和下一步的按钮 <template> //第一步:定义出4个步骤 <el-steps :active="active" finish-status="success"> <el-step title="第一步" />
element-ui表单_每日UI挑战强加-登录表单（分步教程）
weixin_26732881的博客
08-05 923
element-ui表单A step by step journey to create a good design from the daily UI challenge 一步步走，从日常的UI挑战中创建出色的设计 内容 (Content) Introduction 介绍 Result demo 结果演示 Prerequisite 先决条件 Step by step guide 逐步指南 C...
vue+elementUI分步表单验证问题
liuv587的博客
09-04 6561
   有这样一个表单,内容有十几项,放在一页不太好看,所以用步骤条分开,但是在表单验证的时候出了问题.问题如下:    第一步,填写表单,点击下一步,没有问题,来到了第二步,结果如下    结果表单验证结果直接出来了.这里的trigger设置为'change',只有input中内容发生改变之后才会触发表单验证. 这说明表单内容被改过,可是我根本没有手动改过,问题出在哪里? 猜想: V...
ElementUi Steps 步骤条的使用
MrWangisgoodboy的博客
06-23 9022
ElementUi Steps 步骤条的使用
Element-UI自学实践（一）
weixin_40017062的博客
08-13 444
Element-UI自学实践
vue element el-form多表单验证.txt
09-17
通过以上步骤，我们成功地实现了 Vue Element UI 中的多表单验证功能。这种方式不仅代码结构清晰，而且易于维护。使用 Promise 和 `Promise.all` 方法能够很好地管理多个表单的验证逻辑，确保所有表单都验证通过后再...
手写的分步注册表单
11-30
自己手写的分步注册表单，HTML5单页面，操作起来很方面
带验证的分步式注册表单
03-30
带验证的分步式注册表单带验证的分步式注册表单带验证的分步式注册表单带验证的分步式注册表单
vue+elementUI 复杂表单的验证、数据提交方案问题
10-16
主要介绍了vue+elementUI 复杂表单的验证、数据提交方案,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Element-UI框架的使用（三）-- Form 表单
weixin_57246557的博客
08-14 7103
Form 表单 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据 一、基本使用 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"&
element组件的使用之步骤条
a1172119635的博客
02-10 853
elementui组件实现步骤条
elementUI实现用el-table，输入表单，并实现enter到下一个表单，并实现必填验证
九段刀客的博客
08-09 1457
实现效果 实现代码 <template> <div class="app-container"> <el-button-group> <el-button type="primary" icon="el-icon-plus" size="mini" @click="toAddRow">新增行</el-button&gt...
vue+elementUI多个表单提交
friend_ship的博客
04-15 2408
export default { data() { return { baseform: { 'username': '', 'password': '' }, form: { 'name': '', ...
vue使用elementUI组件提交表单（带图片）到node后台
如诗
09-16 3093
1、方法一（图片与表单分开，请求2次） 1.1 前台代码 // elementUI表单 <el-form ref="form" class="forms" :model="form"> <div class="title"> <el-input type="text" placeholder="请在这里输入标题" v-model="
使用Element-UI的步骤条和进度条实现二级步骤条
m0_43422403的博客
06-29 6782
实现效果 实现步骤 1.完成初步样式 将6个部分共同组成一个二级进度条，分别设置样式，用display：flex完成布局 html部分： <div class="step"> <!-- 第一部分 --> <div class="dot blue"></div> <div class="step_mod"> <!-- 第二部分 --> <div class="
elementplus 分步表单
最新发布
11-12
Element Plus 是基于 Vue.js 的 UI 组件库 Vuetify 的升级版，它提供了丰富的、现代化的组件集，其中包括分步表单（Step Form）。分步表单，也称为 Wizard 或 Stacked Form，是一种将复杂表单划分为多个步骤的设计模式，用户按照预设的顺序逐步填写信息。 在 Element Plus 中，你可以使用 `el-form` 和 `step` 组件来创建分步表单。每个 `step` 包含一个单独的部分，通常包含 `el-form-item` 用于输入字段。`el-form` 元素配置了 `model` 和 `steps` 属性，`model` 是表单数据，`steps` 则是一个数组，定义了各个步骤的顺序。用户完成一个步骤后可以点击“下一步”按钮进入下一个步骤，直到所有步骤都完成后提交整个表单。 使用步骤如下： 1. 安装 Element Plus：在项目中安装并引入组件库。 2. 创建 `<el-form>` 根元素，并设置 `model` 和 `steps`。 3. 在 `steps` 数组里定义每个步骤的内容，通常会嵌套 `el-form` 和相关的表单项。 4. 设置 `active-index` 属性控制当前显示哪一步。 5. 添加导航按钮（如 "prev" 和 "next"）处理用户的前进和后退操作。 6. 当用户完成所有步骤并验证通过后，调用 `submit` 方法提交表单数据。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值