欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue循环生成el-form-item时,绑定值的写法

程序员文章站 2024-02-19 10:57:46
...

先来效果图
vue循环生成el-form-item时,绑定值的写法
需求:每加一个场次新增一场活动,并添加验证规则

关键代码部分:

          <el-form-item label="活动场次" prop="roundTimeList">
            <el-button type="primary" icon="el-icon-plus" @click="addSession">添加活动场次</el-button>
          </el-form-item>
          <div v-for="(item,index) in formParams.roundTimeList" :key="index">
            <el-form-item
              :label="`活动场次${index+1}`"
              :prop="`roundTimeList[${index}].timeRange`"    `<————关键代码`
              :rules="formRules.roundTimeList0"
            >
              <el-time-picker
                is-range
                v-model="item.timeRange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                value-format="HH:mm:ss"
                style="margin-right:10px"
                :clearable="true"
              ></el-time-picker>
              <el-button type="danger" icon="el-icon-minus" circle @click="delSession(index)"></el-button>
            </el-form-item>
          </div>
      formParams: {
        roundTimeList: [],
      },
      formRules: {
        roundTimeList: [
          { required: true, message: "请添加场次", trigger: "blur" }
        ],
        roundTimeList0: [
          { required: true, message: "请选择场次时间", trigger: "change" }
        ]
      }
      methods:{
	    addSession() {
	      let obj = {
	        id: null,
	        startTime: "",
	        endTime: "",
	        timeRange: ["00:00:00", "23:59:59"]
	      };
	      if (this.formParams.roundTimeList.length < 10) {
	        this.formParams.roundTimeList.push(obj);
	      } else {
	        this.$message.warning(`最多添加${this.roundTimeList.length}场`);
	      }
	    },  
		delSession(index) {
	      this.formParams.roundTimeList.splice(index, 1);
	    },
	 }

注意: 使用el-time-picker,时间范围选择时,绑定的初始值timeRange不能给空数组[], 给空数组的话会无法选中时间的bug