Vue实现递增年限的功能

最新推荐文章于 2023-12-28 11:14:38 发布

LHC087

最新推荐文章于 2023-12-28 11:14:38 发布

阅读量496

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43829905/article/details/125909445

版权

本文介绍如何在Vue.js应用中创建一个组件，该组件能够实现年份的递增功能。通过查看提供的代码段，我们可以看到一个名为`vacationAssignRules.vue`的组件被用于此目的。

摘要由CSDN通过智能技术生成

Vue实现递增年限的功能

效果图：
在这里插入图片描述

代码：

vacationAssignRules.vue组件

<template>
    <div class="vacation-assign-rules">
        <div class="rule-content" v-if="distributeRule">
            <div class="assign-rule-line">
                <span class="assign-date-item">{
  { distributeRule === 1 ? '司龄' : '工龄' }}&lt;</span>
                <el-input-number
                    size="small"
                    style="width: 88px"
                    v-model="timeRuleList[0].endTime"
                    controls-position="right"
                    :min="1"
                    @change="val => handleChange(val, 'first')"
                    :step="1"
                    step-strictly
                ></el-input-number>
                <span class="assign-date-item">年，享有</span>
                <el-input-number
                    size="small"
                    style="width: 88px"
                    v-model="timeRuleList[0].days"
                    controls-position="right"
                    :max="365"
                    :min="0"
                    :step="1"
                    step-strictly
                ></el-input-number>
                <span class="assign-date-item">天假期</span>
            </div>
            <template v-for="(item, i) in timeRuleList">
                <div class="assign-rule-line" v-if="i > 0 && i < timeRuleList.length - 1" :key="i">
                    <span class="assign-date-item"
                        >{
  { timeRuleList[i - 1].endTime }}年≤{
  { distributeRule === 1 ? '司龄' : '工龄' }}&lt;</span
                    >
                    <el-input-number
                        size="small"