重要的是 參與驗(yàn)證的屬性都必須是響應(yīng)式數(shù)據(jù)，否則驗(yàn)證會(huì)出錯(cuò)

注意兩點(diǎn)：1.每次添加之后屬性都要置空 可在watch里監(jiān)聽(tīng)。2. 每次彈窗取消都要將驗(yàn)證置空（如果有驗(yàn)證不通過(guò)的系統(tǒng)有緩存）

//取消修改驗(yàn)證
this.$refs["upmodal_info"].resetFields();

<template>
  <div class="content">
      <Table border :columns="columns" :data="class_list">
        <template slot-scope="{ row }" slot="stateSlot">
          <span style="color: #19BE6B;" v-if="row.checkstate === 3">
            通過(guò)
          </span>
          <span style="color: #ED4014;" v-if="row.checkstate === 4">
            不通過(guò)
          </span>
        </template>
      </Table>
      <div class="page">
        <Page
          :total="class_list.total"
          :current="form.page"
          @on-change="change_page"
          show-total
        ></Page>
      </div>
    <Modal
      v-model="add_flag"
      :mask-closable="false"
      title="添加學(xué)生"
      class="modal1"
    >
      <div class="conter" v-if="add_flag">
        <Form
          :rules="formRule"
          ref="modal_info"
          :model="add_info"
          :label-width="90"
          label-position="right"
        >
          <FormItem label="姓名" prop="username">
            <Input v-model="add_info.username" placeholder="請(qǐng)輸入姓名" />
          </FormItem>
       // 單選按鈕
          <FormItem label="性別" prop="usersex">
            <RadioGroup v-model="add_info.usersex">
              <Radio :value="1" :label="1"> 男 </Radio>
              <Radio :value="2" :label="2"> 女 </Radio>
            </RadioGroup>
          </FormItem>
         //下拉選擇
          <FormItem label="年級(jí)" prop="gradeid">
            <Select v-model="add_info.gradeid" placeholder="請(qǐng)選擇年級(jí)">
              <Option
                v-for="u in grade_list"
                :key="u.gradeid"
                :value="u.gradeid"
              >
                {{ u.gradename }}
              </Option>
            </Select>
          </FormItem>
//數(shù)字輸入框
 <FormItem label="班級(jí)排序" prop="classorder">
            <InputNumber :min="1" v-model="add_info.classorder"></InputNumber>
          </FormItem>
//多行文本
<FormItem label="班級(jí)公告" prop="placard">
            <Input
              v-model="add_info.placard"
              :maxlength="512"
              type="textarea"
              :rows="6"
              placeholder="請(qǐng)?zhí)顚?xiě)班級(jí)公告"
            />
          </FormItem>
          <FormItem label="民族" prop="nation">
            <Input v-model="add_info.nation" placeholder="請(qǐng)輸入民族" />
          </FormItem>
          <FormItem label="身份證號(hào)" prop="cardid">
            <Input
              v-model="add_info.cardid"
              :maxlength="18"
              placeholder="請(qǐng)輸入身份證號(hào)"
            />
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button @click="add_flag = false">取消</Button>
        <Button @click="add_class" type="primary" :loading="wait_flag"
          >保存</Button
        >
      </div>
    </Modal>
    </div>
</template>
<script>
export default {
  data() {
  return {
     columns: [
        {
          title: "序號(hào)",
          align: "center",
          width: 80,
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.form.page - 1) * this.form.pageSize + 1
            );
          },
        },
        {
          title: "姓名",
          key: "username",
          align: "center",
        },
        {
          title: "審核狀態(tài)",
          slot: "stateSlot",
          align: "center",
          width: 100,
        },
        {
          title: "身份證號(hào)",
          key: "cardid",
          align: "center",
          width: 200,
        },
        {
          title: "創(chuàng)建時(shí)間",
          key: "createtime",
          align: "center",
          width: 200,
        },
        {
          title: "操作",
          key: "classname",
          align: "center",
          width: 200,
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: { cursor: "pointer", color: "#21A9FF" },
                  on: {
                    click: () => {
                      this.see_item = params.row;
                      this.see_flag = true;
                    },
                  },
                },
                "查看"
              ),
              h(
                "span",
                {
                  style: { margin: "0 10px", color: "#21A9FF" },
                },
                "|"
              ),
              h(
                "span",
                {
                  style: { cursor: "pointer", color: "#21A9FF" },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    },
                  },
                },
                "修改"
              ),
              h(
                "span",
                {
                  style: { margin: "0 10px", color: "#21A9FF" },
                },
                "|"
              ),
              h(
                "span",
                {
                  style: { cursor: "pointer", color: "rgb(255, 0, 30)" },
                  on: {
                    click: () => {
                      this.del(params.row);
                    },
                  },
                },
                "刪除"
              ),
            ]);
          },
        },
      ],
      formRule: {
        username: [
          {
            transform: (value) => (value ? value.trim() : ""),
            required: true,
            message: "姓名不能為空",
            trigger: "blur",
          },
        ],
        usersex: [
          {
            required: true,
            message: "請(qǐng)選擇性別",
          },
        ],
        nation: [
          {
            transform: (value) => (value ? value.trim() : ""),
            required: true,
            message: "民族不能為空",
            trigger: "blur",
          },
        ],
        cardid: [
          {
            required: true,
            message: "身份證號(hào)不能為空",
            trigger: "blur",
          },
          {
            pattern: /(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "身份證號(hào)格式不正確",
            trigger: "blur",
          },
        ],
loginpwd: [
          { required: true, message: "密碼不能為空", trigger: "blur" },
          {
            min: 4,
            max: 20,
            message: "密碼長(zhǎng)度為4~20個(gè)字符"
          }
        ],
 userphone: [
          {
            required: true,
            message: "手機(jī)號(hào)不能為空",
            trigger: "blur"
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手機(jī)號(hào)碼格式不正確",
            trigger: "blur"
          }
        ],
        gradeid: [
          {
            required: true,
            message: "年級(jí)不能為空",
            type: "number",
            trigger: "change"
          }
        ],
        placard: [
          {
            required: true,
            message: "班級(jí)公告不能為空",
            trigger: "blur"
          }
        ],
        classorder: [
          {
            required: true,
            type: "number",
            message: "班級(jí)排序不能為空",
            trigger: "blur"
          }
        ],
      },
     }
   }
}

</script>