首页el-form el-row el-col基本使用

el-form el-row el-col基本使用

时间: 2024-11-28 07:18:18 浏览: 290

`el-form`, `el-row`, 和 `el-col` 是 Element UI 中常用的组件。`el-form` 是表单组件，用于组织和管理用户输入的数据；`el-row` 是栅格布局容器，它帮助你在页面上创建行并支持响应式设计；而 `el-col` 则是列组件，用于定义栅格单元，控制每个元素在一行内的宽度。基本使用示例如下： ```html  <script src="https://unpkg.com/element-ui/lib/index.js"></script>  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <div id="app"> <el-form ref="form" :model="formData">  <el-row>  <el-col :span="8">字段1</el-col> <el-col :span="8">字段2</el-col> <el-col :span="8">字段3</el-col> </el-row> </el-form> </div> // JavaScript部分 <template> <div> <button @click="submitForm">提交表单</button> </div> </template> <script> import { ElForm, ElFormItem } from "element-ui"; export default { data() { return { formData: {}, // 初始化表单数据 }; }, components: { ElForm, ElFormItem, }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单验证通过，这里可以处理表单提交操作 console.log(this.formData); } else { console.log("表单验证失败"); } }); }, }, }; </script> ``` 在这个例子中，我们创建了一个包含 `el-form` 的表单，并在其中使用了 `el-row` 和 `el-col` 来分隔表单字段。`:span` 属性设置了每个 `el-col` 占据的列数。点击“提交表单”按钮时，会触发表单验证。

阅读全文