From 115287b451d6cb2ef3d215c1113d5e52e2f5422b Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期五, 17 五月 2024 21:08:19 +0800
Subject: [PATCH] 111
---
src/components/form/form.vue | 153 +++++++++++++++++++++++++++++++-------------------
1 files changed, 94 insertions(+), 59 deletions(-)
diff --git a/src/components/form/form.vue b/src/components/form/form.vue
index 19805f9..12fdc49 100644
--- a/src/components/form/form.vue
+++ b/src/components/form/form.vue
@@ -1,67 +1,102 @@
<template class="">
- <div>
- <el-form size="mini" :inline="true" style="padding: 30rpx 30rpx 10rpx 30rpx" :model="from"
- class="row demo-form-inline col-xs-12">
- <el-row :gutter="10">
- <el-form-item style="width: 30%;" v-for="(item, i) in from.from" :key="i" :label="item.label">
- <el-input v-if="item.type === 'input'" v-model="item.value" :placeholder="item.label"></el-input>
- <el-input v-if="item.type === 'number'" min="1" type="number" v-model.number="item.value"
- :placeholder="item.label"></el-input>
- <el-select v-else-if="item.type === 'select'" v-model="item.value" :placeholder="item.label">
- <el-option v-for="(option, optionIndex) in item.options" :key="optionIndex"
- :label="option.label" :value="option.value"></el-option>
- </el-select>
- </el-form-item>
- <!-- 鍏朵粬琛ㄥ崟椤圭渷鐣� -->
- <!-- <el-form-item style="display:block; "> -->
- <view class="flex flex-center Formbtn">
-
- <el-button style="background-color: #244A7B;color: #fff;" size="mini"
- @click="handleSubmit">鎻愪氦</el-button>
- <el-button type="info" plain size="mini" @click="handleReset">閲嶇疆</el-button>
- </view>
- <!-- </el-form-item> -->
- </el-row>
- </el-form>
- </div>
+ <div>
+ <el-form
+ size="mini"
+ :inline="true"
+ style="padding: 30rpx 30rpx 10rpx 30rpx"
+ :model="from"
+ class="row demo-form-inline col-xs-12"
+ >
+ <el-row :gutter="10">
+ <el-form-item
+ style="width: 30%"
+ v-for="(item, i) in from.from"
+ :key="i"
+ :label="item.label"
+ >
+ <el-input
+ v-if="item.type === 'input'"
+ v-model="item.value"
+ :placeholder="item.label"
+ ></el-input>
+ <el-input
+ v-if="item.type === 'number'"
+ min="1"
+ type="number"
+ v-model.number="item.value"
+ :placeholder="item.label"
+ ></el-input>
+ <el-select
+ v-else-if="item.type === 'select'"
+ v-model="item.value"
+ :placeholder="item.label"
+ >
+ <el-option
+ v-for="(option, optionIndex) in item.options"
+ :key="optionIndex"
+ :label="option.label"
+ :value="option.value"
+ ></el-option>
+ </el-select>
+ </el-form-item>
+ <!-- 鍏朵粬琛ㄥ崟椤圭渷鐣� -->
+ <!-- <el-form-item style="display:block; "> -->
+ <view class="flex flex-center Formbtn">
+ <el-button
+ style="background-color: #244a7b; color: #fff"
+ size="mini"
+ @click="handleSubmit"
+ >鎻愪氦</el-button
+ >
+ <el-button type="info" plain size="mini" @click="handleReset"
+ >閲嶇疆</el-button
+ >
+ </view>
+ <!-- </el-form-item> -->
+ </el-row>
+ </el-form>
+ </div>
</template>
<script>
- export default {
- props: ['from'],
- methods: {
- handleSubmit() {
- this.$message({
- message: '鏌ヨ鎴愬姛',
- type: 'success'
- })
- const result = this.from.from.reduce((obj, item) => {
- obj[item.name] = item.value
- return obj
- }, {})
- // 鎻愪氦閫昏緫
- this.$emit('submit', result) // 鍙戦�� submit 浜嬩欢锛屽苟灏嗚〃鍗曟暟鎹綔涓哄弬鏁颁紶閫掔粰鐖剁粍浠�
- },
- handleReset() {
- this.from.from.forEach(item => {
- item.value = ''
- })
- // 閲嶇疆閫昏緫
- // this.$emit('reset') // 鍙戦�� reset 浜嬩欢缁欑埗缁勪欢
- }
- }
- }
+export default {
+ props: ["from"],
+ mounted(){
+ console.log(this.from,"from");
+ },
+ methods: {
+ handleSubmit() {
+ this.$message({
+ message: "鏌ヨ鎴愬姛",
+ type: "success",
+ });
+ const result = this.from.from.reduce((obj, item) => {
+ obj[item.name] = item.value;
+ return obj;
+ }, {});
+ // 鎻愪氦閫昏緫
+ this.$emit("submit", result); // 鍙戦�� submit 浜嬩欢锛屽苟灏嗚〃鍗曟暟鎹綔涓哄弬鏁颁紶閫掔粰鐖剁粍浠�
+ },
+ handleReset() {
+ this.from.from.forEach((item) => {
+ item.value = "";
+ });
+ // 閲嶇疆閫昏緫
+ this.$emit('reset') // 鍙戦�� reset 浜嬩欢缁欑埗缁勪欢
+ },
+ },
+};
</script>
<style scoped>
- .el-form--inline .el-form-item {
- margin-right: 0;
- }
+.el-form--inline .el-form-item {
+ margin-right: 0;
+}
- ::v-deep .el-form-item__content {
- width: 80%;
- }
+::v-deep .el-form-item__content {
+ width: 80%;
+}
- ::v-deep .el-form-item__content div {
- width: 100%;
- }
-</style>
\ No newline at end of file
+::v-deep .el-form-item__content div {
+ width: 100%;
+}
+</style>
--
Gitblit v1.9.1