애플 릿 노트 만 들 기 - 동적 폼 추가

온라인 으로 식사 인원 을 집계 하려 면 동적 으로 일 수 를 추가 해 야 하기 때문에 추가 하면 해당 하 는 양식 을 삭제 해 야 합 니 다. js 의 arr. push 와 arr. splice 를 통 해 이 루어 집 니 다. 다음은 코드 입 니 다. 메모:
Js 부분
Page({
  data: {
    formitems:[]   //   formitems     
  },
//  
additems(e){
    var formitems = this.data.formitems
    var newData = {id: formitems.length};  //        id          
    formitems.push(newData);  // formitems  1   
    this.setData({
      formitems: formitems, //    
    })  
  },
//  
  delme(e){
    var delid=e.currentTarget.id; //        (     id   )
    var formitems = this.data.formitems
    formitems.splice(delid, 1); // id       ,  1 
    console.log(formitems)
    this.setData({
      formitems: formitems,  /    
    })  
  },
})

WXML 부분
{{item.idx=="" || item.idx==null ? " ": departs[item.idx]}} {{item.dates=="" || item.dates==null ? todaydate : item.dates}} 1

WXML 부분
/* pages/canteen/submeal/submeal.wxss */
.inputlist{
  display: flex;
  flex-direction: row;
  width:100%;
}
.desc{
  width:80rpx;
  height:80rpx;
  margin:10rpx;
  font-size:30rpx;
  display:flex;
  align-items: center;
  justify-content: center;
}
.inputs{
  width:60%;
  height:60rpx;
  margin:10rpx;
  border:6rpx solid #50aaff;
  border-radius: 10rpx;
  display:flex;
  align-items: center;
  justify-content: center;
}
.pickview{
  width:100%;
  height:80rpx;
  display:flex;
  align-items: center;
  justify-content: center;
}
.formsub{
  color:#fff;
  margin:20rpx auto;
}
.inlinelist{
  display:flex;
  flex-direction: row;
  width:50%;
}
.additems{
  width:50%;
  background:#50aaff;
  color:#fff;
  margin:20rpx auto;
  height:50rpx;
  padding:20rpx;
  text-align: center;
  border-radius: 10rpx;
}
.deleteme{
  width:50%;
  background:#ff7777;
  color:#fff;
  margin:20rpx auto;
  height:50rpx;
  padding:20rpx;
  text-align: center;
  border-radius: 10rpx;
}

이렇게 하면 동적 으로 추가 할 수 있 습 니 다. 그리고 지우 고 싶 은 것 을 지 울 수 있 습 니 다. 해 보 세 요.
나 는 우리 의 행정 문원 이 되 고 싶다.

좋은 웹페이지 즐겨찾기