vue+elemntui 加减表单框功能样式

最新推荐文章于 2024-05-31 07:18:46 发布

知了枝头看雪

最新推荐文章于 2024-05-31 07:18:46 发布

阅读量259

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44941581/article/details/139207127

版权

       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="配置时间" prop="currentAllocationDate">
            <div v-for="(item,key) in timeList">
              <el-date-picker
                v-model="item.time"
                type="datetimerange"
                value-format="timestamp"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>

                <el-button class="add" @click="passStreamAdd">+</el-button>
                <el-button class="reduce" @click="passStreamReduce(key)">-</el-button>
            </div>
        </el-form-item>
</el-form>

  data() {
    return {
          // 增加 or 减少时间 配置时间项
      timeList: [{}],
      form: {
          currentAllocationDate: ''
      }
    }
 }),
   watch: {
    timeList: {
      handler: function(val, oldVal) {
        this.form.currentAllocationDate = JSON.stringify(val)
      },
      immediate: true
    }
  },
   methods: {
    //增加
    passStreamAdd(){
      this.timeList.push({})
    },
    //减少
    passStreamReduce(index){
      let newArr = [];
      //为一层时禁止减
      if(this.timeList.length == 1){ return; }
      if(index == 0){
        //为首
        newArr = this.timeList.slice( 1,this.timeList.length)
      }else if(index == this.timeList.length-1){
        //为尾
        newArr = this.timeList.slice( 0,this.timeList.length-1)
      }else{
        //为中
        let arr1 = this.timeList.slice( 0,index)
        let arr2 = this.timeList.slice( index+1, this.timeList.length)
        newArr = arr1.concat(arr2)
      }
      this.timeList = [].concat(newArr);
    },
   }
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.timeList = [{}] // 注意这
      this.title = "添加平衡清零";
    },
        /** 修改按钮操作 */
    handleUpdate(row) {
      this.loading = true;
      this.reset();
      const id = row.id || this.ids
      getBalancedZeroing(id).then(response => {
        this.loading = false;
        this.form = response.data;
        this.timeList = this.form.currentAllocationDate ?                JSON.parse(this.form.currentAllocationDate) : [{}]
        this.open = true;
        this.title = "修改平衡清零";
      });
    },