Vuetify——表单提交

最新推荐文章于 2024-07-27 00:30:00 发布

贝塔贝卡贝

最新推荐文章于 2024-07-27 00:30:00 发布

阅读量532

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Kiruthika/article/details/119843877

版权

这是一个使用Vue.js编写的表单组件，用于创建和编辑数据。组件包含姓名、昵称、类型、描述、是否必备和唯一性等字段，并使用了Vuetify库的组件如`v-form`、`v-text-field`、`v-select`和`v-checkbox`。当表单数据不完整时，会显示错误提示。提交按钮根据操作类型（创建或编辑）调用不同的处理方法。

摘要由CSDN通过智能技术生成

index.vue:

<v-form class="pa-4" ref="form">
   <v-alert
        v-if="verifyResult"
        outlined
        type="error"
        class="text-left body-2 mb-8"
      >
    请填写完整表单数据
    </v-alert>
    <v-row no-gutters dense style="border-bottom:none!important;">
      <v-col cols="3" class="mt-2">
        <v-subheader>
          <span class="red--text">*</span>
          姓名
        </v-subheader>
      </v-col>
      <v-col cols="9" v-if="displayType === 'CREATE'">
        <v-text-field v-model="name" rows="1"></v-text-field>
      </v-col>
      <v-col cols="9" v-else style="margin-top:8px;">
        {{ name }}
      </v-col>
    </v-row>
    <v-row no-gutters dense style="border-bottom:none!important;">
      <v-col cols="3" class="mt-2">
        <v-subheader>
          <span class="red--text">*</span>
          昵称
        </v-subheader>
      </v-col>
      <v-col cols="9">
        <v-text-field v-model="display_name" rows="1"></v-text-field>
      </v-col>
    </v-row>
    <v-row no-gutters dense style="border-bottom:none!important;">
      <v-col cols="3" class="mt-2">
        <v-subheader>
          <span class="red--text">*</span>
          类型
        </v-subheader>
      </v-col>
      <v-col class="d-flex" cols="12" sm="6">
        <v-select
          :items="types"
          :label="value_type ? '' : '请选择'"
          item-text="name"
          item-value="id"
          v-model="value_type"
          @change="getvalue_typeSelected(value_type)"
        ></v-select>
      </v-col>
    </v-row>
    <v-row no-gutters dense style="border-bottom:none!important;">
      <v-col cols="3" class="mt-2">
        <v-subheader>
          <span class="red--text">*</span>
          描述
        </v-subheader>
      </v-col>
      <v-col cols="9">
        <v-text-field v-model="description" rows="1"></v-text-field>
      </v-col>
    </v-row>
    <v-row no-gutters dense style="border-bottom:none!important;">
      <v-col cols="3" class="mt-2">
        <v-subheader>
          <span class="red--text">*</span>
          是否必备
        </v-subheader>
      </v-col>
      <v-col cols="9">
        <v-checkbox class="v-label" v-model="required"></v-checkbox>
      </v-col>
    </v-row>
    <v-row no-gutters dense style="border-bottom:none!important;">
      <v-col cols="3" class="mt-2">
        <v-subheader>
          <span class="red--text">*</span>
          唯一
        </v-subheader>
      </v-col>
      <v-col cols="9" v-if="!(displayType === 'EDIT')">
        <v-checkbox
          class="v-label"
          v-model="unique"
          :disabled="displayType === 'EDIT'"
        ></v-checkbox>
      </v-col>
      <v-col v-else cols="9" style="margin-top:8px;align-self: center;">
        {{ unique ? "是" : "否" }}
      </v-col>
    </v-row>
    <v-row
      no-gutters
      dense
      style="align-items:center;"
      v-if="displayType === 'EDIT'"
    >
      <v-col cols="3" class="mt-2">
        <v-subheader>
          <span class="red--text"></span>
          是否上进
        </v-subheader>
      </v-col>
      <v-col cols="9" style="margin-top:8px;">
        {{ virtual ? "是" : "否" }}
      </v-col>
    </v-row>
    <v-row>
      <v-col class="d-flex" cols="3"></v-col>
      <v-col cols="9" class="text-left">
        <v-btn elevation="4" medium color="primary" @click="submit">
          {{ displayType === "CREATE" ? "新建" : "修改" }}</v-btn
        >
        <v-btn
          class="ml-6"
          elevation="0"
          medium
          color="gary"
          @click="cancel"
          >取消</v-btn
        >
      </v-col>
    </v-row>
  </v-form>


<script>
export default{
	data(){
		displayType: "CREATE",
      editId: null,
      verifyResult: false,
      name: "",
      display_name: "",
      description: "",
      value_type: "",
      required: false,
      unique: false,
      builtin: false,
      virtual: false,
      types: [
        {
          id: "STRING",
          name: "字符串类型"
        },
        {
          id: "BOOLEAN",
          name: "布尔值"
        },
        {
          id: "INTEGER",
          name: "数字类型"
        },
        {
          id: "DATETIME",
          name: "日期时间类型"
        },
        {
          id: "DATE",
          name: "日期类型"
        }
      ]
	},
	methods:{
		getvalue_typeSelected(val) {
      		this.value_type = val;
	    },
	    submit() {
	      if (
	        this.name.trim() !== "" &&
	        this.display_name.trim() !== "" &&
	        this.value_type.trim() !== "" &&
	        this.description.trim() !== ""
	      ) {
	      	//调提交接口
	        this.displayType === "CREATE" ? this.toCreate() : this.toEdit();
	      } else {
	        this.verifyResult = true;
	        setTimeout(() => {
	          this.verifyResult = false;
	        }, 2000);
	      }
	    },
	}
}


</script>