ant of vue框架表单验证动态添加删除

在表单里的select根据选择状态动态给下面input添加删除 表单验证效果

page代码

      <a-col :span="24">
          <a-form-item label="巡检类型" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }">
            <a-select
              @change="handleChange"
              v-decorator="[
                'type',
                {
                  rules: [{ required: true, message: '请输入巡检类型' }],
                  initialValue: editCurrentRow.type == 1 ? '常规巡检' : '临时巡检',
                },
              ]"
              placeholder="请输入巡检类型"
            >
              <a-select-option :value="item.value" :key="item.value" v-for="item in checkingType">{{
                item.label
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-row class="ant-wor" v-if="isShow">
          <a-col style="padding-left: 3.3%" :span="12">
            <a-form-item :label="'巡检周期'" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
              <a-select
                v-decorator="[
                  'cycle',
                  {
                    rules: [
                      {
                        required: isShow,
                        message: '请输入巡检周期',
                      },
                    ],
                  },
                ]"
                @change="handlecycle"
                placeholder="请输入巡检周期"
              >
                <a-select-option value="1"> 7天</a-select-option>
                <a-select-option value="2"> 14天</a-select-option>
                <a-select-option value="3"> 30天 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="3" class="zdy">
            <a-checkbox @change="onChange"> 自定义 </a-checkbox>
            <a-input
              onkeyup="this.value=this.value.replace(/\D/g,'')"
              onafterpaste="this.value=this.value.replace(/\D/g,'')"
              style="width: 50px"
              v-model="adys"
            />
            <p style="padding-top: 4%; margin-left: 3%">天</p>
          </a-col>
        </a-row>

//vue data isShow:false

//js this.$nextTick(() => { this.createPolicyForm.validateFields(['cycle'], { force: true }) //关键部分 this.createPolicyForm.validateFields(['planContent'], { force: true }) })

小程序列表修改条目中属性后,页面不能动态更新问题

//小程序列表接口 getList() { app.func.get("/mes-admin/workshopManagement/mesworkshopmanagement/pickingPage?page=" + this.data.page + "&limit=" + this.data.limit + "&startDate=" + this.data.date + "&outType=" + this.data.outType + "&materielType=" + this.data.index).then((res) => { console.log(res.data) this.setData({ list: res.data.data.list }) },

//组件id getDate: function (e) { // console.log(e.detail.id) if (e.detail.id == 1) { this.setData({ outType: '1',//状态参数 list: ''//在改变状态参数时通过清空初始化list数据 })

  this.getList()//在来调用赋值过状态参数的接口,实现重新对list赋值从而更新页面列表
} else if (e.detail.id == 0) {
  this.setData({
    outType: '2',//状态参数
    list: ''
  })
  this.getList()
}