【Element入门】3、Element UI 表单组件详解

已于 2024-05-22 18:17:14 修改
阅读量1.6k 收藏 13
点赞数 7
分类专栏： Element UI系列 前端教学-爪磕 文章标签： ui vue.js javascript elementui 前端 前端框架
于 2024-05-22 18:10:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52938153/article/details/139124113
版权

【Element入门】表单组件详解

Element入门系列导航

【Element入门】1、Element UI 介绍与安装
【Element入门】2、Element UI 的基本使用
【Element入门】3、Element UI 表单组件详解（本文）
【Element入门】4、Element UI 布局组件详解
【Element入门】5、Element UI 导航组件详解
【Element入门】6、Element UI 数据展示组件详解
【Element入门】7、Element UI 反馈组件详解
【Element入门】8、Element UI 自定义主题

前言

表单是 Web 应用中最常见的交互形式之一，几乎每个项目都会涉及到表单的创建和处理。Element UI 提供了强大的表单组件，可以帮助我们快速构建表单并实现复杂的表单验证和提交逻辑。本篇文章将详细介绍 Element UI 中的 Form 组件的基本使用方法，以及如何实现表单验证与提交。

Form组件基本使用

创建基础表单

Element UI 提供的 el-form 组件可以帮助我们快速创建表单。在 el-form 组件中，我们可以使用 el-form-item 组件来定义表单项，el-input 等其他组件来实现具体的表单控件。

<template>
  <div id="app">
    <el-form :model="form" label-width="120px">
      <el-form-item label="Username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="Password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: ''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('Form data:', this.form);
    }
  }
};
</script>

在上述代码中，我们创建了一个包含用户名、电子邮件和密码输入框的表单，并在点击提交按钮时输出表单数据。

表单布局

在 el-form-item 组件中，我们可以通过 label 属性设置表单项的标签，通过 label-width 属性设置标签的宽度。Element UI 还提供了多种布局方式，如行内布局和分栏布局等。

行内布局

我们可以通过设置 inline 属性来实现行内布局：

<template>
  <div id="app">
    <el-form :model="form" inline label-width="120px">
      <el-form-item label="Username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
分栏布局

我们可以使用 el-row 和 el-col 组件来实现分栏布局：

<template>
  <div id="app">
    <el-form :model="form" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="First Name">
            <el-input v-model="form.firstName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Last Name">
            <el-input v-model="form.lastName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="Email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      form: {
        firstName: '',
        lastName: '',
        email: ''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('Form data:', this.form);
    }
  }
};
</script>

表单验证与提交

基本表单验证

Element UI 提供了强大的表单验证功能。我们可以通过在 el-form-item 组件中使用 rules 属性来定义验证规则，并通过 el-form 组件的 rules 属性将这些规则应用到表单中。

<template>
  <div id="app# 【Element入门】表单组件详解

## 前言

表单是 Web 应用中最常见的交互形式之一，几乎每个项目都会涉及到表单的创建和处理。Element UI 提供了强大的表单组件，可以帮助我们快速构建表单并实现复杂的表单验证和提交逻辑。本篇文章将详细介绍 Element UI 中的 `Form` 组件的基本使用方法，以及如何实现表单验证与提交。

## Form组件基本使用

### 创建基础表单

Element UI 提供的 `el-form` 组件可以帮助我们快速创建表单。在 `el-form` 组件中，我们可以使用 `el-form-item` 组件来定义表单项，`el-input` 等其他组件来实现具体的表单控件。

```vue
<template>
  <div id="app">
    <el-form :model="form" label-width="120px">
      <el-form-item label="Username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="Password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: ''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('Form data:', this.form);
    }
  }
};
</script>

在上述代码中，我们创建了一个包含用户名、电子邮件和密码输入框的表单，并在点击提交按钮时输出表单数据。

表单布局

在 el-form-item 组件中，我们可以通过 label 属性设置表单项的标签，通过 label-width 属性设置标签的宽度。Element UI 还提供了多种布局方式，如行内布局和分栏布局等。

行内布局

我们可以通过设置 inline 属性来实现行内布局：

<template>
  <div id="app">
    <el-form :model="form" inline label-width="120px">
      <el-form-item label="Username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
分栏布局

我们可以使用 el-row 和 el-col 组件来实现分栏布局：

<template>
  <div id="app">
    <el-form :model="form" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="First Name">
            <el-input v-model="form.firstName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Last Name">
            <el-input v-model="form.lastName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="Email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      form: {
        firstName: '',
        lastName: '',
        email: ''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('Form data:', this.form);
    }
  }
};
</script>

表单验证与提交

基本表单验证

Element UI 提供了强大的表单验证功能。我们可以通过在 el-form 组件中定义验证规则，并将这些规则应用到表单项 (el-form-item) 上。以下示例展示了如何为表单项添加基本的验证规则：

<template>
  <div id="app">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="Username" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Email" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: 'Please input username', trigger: 'blur' }
        ],
        email: [
          { required: true, message: 'Please input email', trigger: 'blur' },
          { type: 'email', message: 'Please input correct email', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: 'Please input password', trigger: 'blur' },
          { min: 6, message: 'Password must be at least 6 characters', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

在上述代码中：

  • rules 对象定义了每个表单项的验证规则。
  • el-form-item 组件的 prop 属性与 rules 对象中的字段对应。
  • this.$refs.form.validate 方法用于触发验证，验证通过时执行提交逻辑。

自定义验证规则

除了内置的验证规则外，Element UI 还支持自定义验证规则。我们可以通过定义一个函数来实现复杂的验证逻辑。以下示例展示了如何添加自定义验证规则：

<template>
  <div id="app">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="Username" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item label="Confirm Password" prop="confirmPassword">
        <el-input type="password" v-model="form.confirmPassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      form: {
        username: '',
        password: '',
        confirmPassword: ''
      },
      rules: {
        username: [
          { required: true, message: 'Please input username', trigger: 'blur' }
        ],
        password: [
          { required: true, message: 'Please input password', trigger: 'blur' },
          { min: 6, message: 'Password must be at least 6 characters', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: 'Please confirm password', trigger: 'blur' },
          { validator: this.validateConfirmPassword, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    validateConfirmPassword(rule, value, callback) {
      if (value === '') {
        callback(new Error('Please confirm password'));
      } else if (value !== this.form.password) {
        callback(new Error('Passwords do not match'));
      } else {
        callback();
      }
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

在上述代码中，我们为 confirmPassword 字段添加了一个自定义验证规则 validateConfirmPassword。该函数检查确认密码是否为空，以及是否与密码字段的值匹配。

表单提交

在表单验证通过后，我们可以执行表单提交操作。这通常涉及到将表单数据发送到服务器。以下示例展示了如何在验证通过后提交表单数据：

<template>
  <div id="app">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="Username" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Email" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'App',
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: 'Please input username', trigger: 'blur' }
        ],
        email: [
          { required: true, message: 'Please input email', trigger: 'blur' },
          { type: 'email', message: 'Please input correct email', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: 'Please input password', trigger: 'blur' },
          { min: 6, message: 'Password must be at least 6 characters', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          axios.post('/api/register', this.form)
            .then(response => {
              console.log('Form data submitted:', response.data);
            })
            .catch(error => {
              console.error('Form submission error:', error);
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

在上述代码中，我们使用 axios 库发送表单数据到 /api/register 端点。只有在验证通过 (valid 为 true) 的情况下，才会执行提交操作。

表单重置

有时我们需要在用户提交表单后重置表单数据。Element UI 提供了 resetFields 方法来重置表单数据和验证状态。以下示例展示了如何重置表单：

<template>
  <div id="app">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="Username" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Email" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
        <el-button @click="onReset">Reset</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: 'Please input username', trigger: 'blur' }
        ],
        email: [
          { required: true, message: 'Please input email', trigger: 'blur' },
          { type: 'email', message: 'Please input correct email', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: 'Please input password', trigger: 'blur' },
          { min: 6, message: 'Password must be at least 6 characters', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    onReset() {
      this.$refs.form.resetFields();
    }
  }
};
</script>

在上述代码中，我们添加了一个名为 onReset 的方法，该方法调用 this.$refs.form.resetFields() 来重置表单数据和验证状态。同时，我们在表单底部添加了一个重置按钮，点击该按钮时会触发 onReset 方法。

完整表单示例

为了更直观地展示表单的验证、提交和重置功能，以下是一个完整的表单示例，包含用户名、电子邮件、密码和确认密码字段，并实现了简单的提交和重置逻辑：

<template>
  <div id="app">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="Username" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Email" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item label="Confirm Password" prop="confirmPassword">
        <el-input type="password" v-model="form.confirmPassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Submit</el-button>
        <el-button @click="onReset">Reset</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: '',
        confirmPassword: ''
      },
      rules: {
        username: [
          { required: true, message: 'Please input username', trigger: 'blur' }
        ],
        email: [
          { required: true, message: 'Please input email', trigger: 'blur' },
          { type: 'email', message: 'Please input correct email', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: 'Please input password', trigger: 'blur' },
          { min: 6, message: 'Password must be at least 6 characters', trigger: 'blur' }
        ],
        confirmPassword: [
         ```vue
          { required: true, message: 'Please confirm password', trigger: 'blur' },
          { validator: this.validateConfirmPassword, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    validateConfirmPassword(rule, value, callback) {
      if (value === '') {
        callback(new Error('Please confirm password'));
      } else if (value !== this.form.password) {
        callback(new Error('Passwords do not match'));
      } else {
        callback();
      }
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    onReset() {
      this.$refs.form.resetFields();
    }
  }
};
</script>

在这个示例中，我们实现了以下功能：

  1. 表单验证：每个表单项都有相应的验证规则，例如用户名和电子邮件是必填项，密码至少需要 6 个字符，确认密码需要与密码匹配。
  2. 表单提交：点击提交按钮时，会触发 onSubmit 方法，该方法调用 this.$refs.form.validate 进行表单验证。如果验证通过，则执行提交逻辑（这里简单地弹出一个提示）。
  3. 表单重置：点击重置按钮时，会触发 onReset 方法，该方法调用 this.$refs.form.resetFields 重置表单数据和验证状态。

结语

通过本章的学习，我们详细了解了 Element UI 中 el-form 组件的基本使用方法、表单验证以及表单提交和重置的实现方法。Element UI 提供了简洁而强大的表单功能，帮助我们快速构建健壮的表单系统。

在接下来的章节中，我们将继续深入探讨 Element UI 的其他组件和高级功能，敬请期待！希望这篇文章对你有所帮助，祝你在前端开发的道路上越走越远！

一只小爪磕
关注
  • 7
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element ui表单必填_详解element-ui设置下拉选择切换必填和非必填
weixin_35148673的博客
12-29 6025
➢ 需求默认都是必选下拉选择的时候选择必填，活动名称为必填，需要校验和显示*选择非必填，活动名称不做校验，隐藏*➢ 初始校验规则经测试，网上其他的方式都没有实现需求，动态切换rules中的required没有作用因为按照以下的写法的话，element-ui在组件初始化后校验规则就定型了，切换也没用rules: {name: [{ required: true, message: "请输入名称", ...
详解element-ui中form验证杂记
10-17
Element-UI 提供了丰富的表单组件以及相应的验证机制，帮助开发者实现高效且友好的用户体验。本文将深入探讨Element-UI中form验证的一些关键点。 首先，关于“required”验证的误解。在HTML中，`required`属性用于...
Vue教学17：Element UI基础组件上手，打造美观实用的Vue应用
工作内容分享
03-08 1306
通过本博客的学习，我们深入了解了Element UI的基础组件，包括按钮、输入框、表格、弹窗和分页等。这些组件是构建美观实用Vue应用的关键，它们不仅提供了丰富的功能，还支持样式定制，使得我们可以轻松打造符合需求的界面。掌握Element UI的基础组件对于提高Vue.js应用的开发效率非常重要。它们不仅可以帮助我们节省时间，还能确保我们的应用拥有高质量的UI。希望这篇博客能帮助你深入理解Element UI的基础组件，并在实际项目中灵活运用。如有任何疑问，欢迎在评论区留言讨论。让我们一起学习，共同进步。
Element-UI详解
科技追踪者的专栏
05-22 3598
Element-UI 是一个功能强大、使用便捷的 Vue.js UI 组件库，它为开发者提供了一整套解决方案，大大提高了前端开发的效率和质量。通过本文的介绍，相信你已经对 Element-UI 有了深入的了解。无论是企业后台、内容管理系统还是在线教育平台，Element-UI 都能帮助你快速构建出高质量的应用。希望你在实际项目中能充分利用 Element-UI 的强大功能，开发出更多优秀的应用。
【Element入门】4、Element UI 布局组件详解
weixin_52938153的博客
05-22 1577
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
【Element入门】5、Element UI 导航组件详解
weixin_52938153的博客
05-22 803
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
【Element入门】6、Element UI 数据展示组件详解
weixin_52938153的博客
05-22 1341
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
【Element入门】7、Element UI 反馈组件详解
weixin_52938153的博客
05-22 454
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
Element UI 表单验证详解与实践
一起coding，一起嗨。
05-09 1111
Element UI 表单验证详解与实践
【Element入门】8、Element UI 自定义主题
weixin_52938153的博客
05-22 1456
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
Element UI框架中图片上传组件详解
站在顶峰看星星
06-18 509
注意事项： 图片还在上传过程中是不能提交的
详解element-ui中表单验证的三种方式
10-16
主要介绍了详解element-ui中表单验证的三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解element-ui 表单校验 Rules 配置 常用黑科技
10-15
`Rules`配置是Element-UI表单组件`el-form`的核心功能之一，用于定义表单字段的验证规则，确保用户提交的数据准确无误。以下是对这些规则配置的详细说明： 1. **类型验证**： - `string`：验证字段的值必须是字符...
基于python3+vue+Element-ui开发的CMDB 资产管理系统
12-17
【基于Python3+Vue+Element-UI开发的CMDB资产管理系统详解】 CMDB（Configuration Management Database，配置管理数据库）是IT服务管理中的重要组成部分，它主要用于记录和管理组织内部的各种IT资源及其相互关系。...
2846. 边权重均等查询
NEFU AB-IN's Blog
07-27 579
Leetcode 2846. 边权重均等查询
Aria2 任意文件写入漏洞
最新发布
山兔的博客
07-28 681
Aria2是一个在命令行下运行，多协议，多来源下载工具（HTTP / HTTPS，FTP，BitTorrent，Metalink），内建XML-RPC用户界面。Aria提供RPC服务器，通过–enable-rpc参数启动。Aria2的RPC服务器可以方便的添加、删除下载项目我们可以使用 RPC 接口来操作 aria2 并将文件下载到任意目录，从而造成任意文件写入漏洞。6800 是 Aria2 的 RPC 服务的默认端口。环境启动后，访问 和 服务会返回 404 页面。
麦田物语第十五天
qq_52276934的博客
07-27 1155
今天主要设计了时间的代码逻辑以及UI部分，明天要做的就是将这两部分连接起来即可。
Android 一个简单线程更新UI
weixin_42504805的博客
07-28 180
【代码】Android 一个简单线程更新UI。
系统采用VUE框架结合Element UI组件实现查询表单
07-15
你可以使用Vue框架结合Element UI组件来实现查询表单。Vue是一个用于构建用户界面的渐进式JavaScript框架，而Element UI是一个基于Vue的组件库，提供了丰富的UI组件和样式。 首先，你需要安装Vue和Element UI。可以通过npm或者yarn来进行安装。 ```shell npm install vue npm install element-ui ``` 接下来，在你的Vue项目中，你需要在入口文件中引入Vue和Element UI，并注册Element UI的组件。 ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 然后，你可以在你的组件中使用Element UI的组件来构建查询表单。例如，你可以使用`el-form`和`el-input`组件来创建一个简单的查询表单。 ```html <template> <div> <el-form :model="form" label-width="80px"> <el-form-item label="关键词"> <el-input v-model="form.keyword"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">查询</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { keyword: '' } } }, methods: { submitForm() { // 在这里处理表单提交逻辑 } } } </script> ``` 以上代码展示了一个简单的查询表单，包含一个输入框和一个查询按钮。你可以根据自己的需求进行组件的选择和配置，以实现更复杂的查询功能。 希望这个例子能帮助你开始使用Vue框架结合Element UI组件来实现查询表单。如果你有任何其他问题，请随时提问！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值