el-form每行显示两列底部按钮居中效果的实现

下面我将详细讲解“el-form每行显示两列底部按钮居中效果的实现”的完整攻略。

1. 使用 element-ui 中的 el-form 搭建表单

在使用 element-ui 的 el-form 前,需要先引入 element-ui 库和样式文件,并在 Vue 中进行配置。在添加表单元素时,可以利用 el-col、el-row 以及 span 属性来设置每行的列数和每列元素所占的宽度比例。例如:

<template>
  <el-form ref="form" :model="formData" label-width="100px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="formData.password"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="formData.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

2. 在表单底部添加两个按钮

可以利用 el-form 的 slot 属性来自定义表单中的内容。在此我们可以使用 slot="footer" 在表单底部添加两个居中显示的按钮。例如:

<template>
  <el-form ref="form" :model="formData" label-width="100px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="formData.password"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="formData.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </div>
  </el-form>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const dialogVisible = ref(false);
    const formData = ref({
      username: '',
      password: '',
      email: '',
      gender: '',
    });

    const submitForm = () => {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    };

    return {
      dialogVisible,
      formData,
      submitForm,
    };
  },
};
</script>

3. CSS 样式调整

为了实现按钮的居中效果,我们需要对底部的 div 标签添加一些样式设置。例如:

.dialog-footer {
  text-align: center;
  margin-top: 20px;
  padding: 10px 0;
  border-top: 1px solid #ddd;
}

这样就可以实现 el-form 每行显示两列底部按钮居中效果的实现。

另外还有一种方法是利用 flex 布局来实现。具体方法可以参考下面的示例代码:

<template>
  <el-form ref="form" :model="formData" label-width="100px">
    <el-row class="form-row">
      <el-col :span="12">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="formData.password"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row class="form-row">
      <el-col :span="12">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="formData.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <div class="form-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </div>
  </el-form>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const dialogVisible = ref(false);
    const formData = ref({
      username: '',
      password: '',
      email: '',
      gender: '',
    });

    const submitForm = () => {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    };

    return {
      dialogVisible,
      formData,
      submitForm,
    };
  },
};
</script>

<style>
.form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form-row el-col {
  width: 48%;
}
.form-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.form-footer el-button {
  margin: 0 10px;
}
</style>

以上两种方法都可以实现表单每行显示两列以及底部按钮居中的效果。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:el-form每行显示两列底部按钮居中效果的实现 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • jQuery 顶部导航跟随滚动条滚动固定浮动在顶部

    这里为大家提供一种基于jQuery实现顶部导航随滚动条滚动固定浮动在顶部的方式。 首先,页面头部需要包含jQuery库的引用。使用CDN可行性较高,此处使用jQuery官方CDN。 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></scr…

    css 2023年6月10日
    00
  • flex弹性布局详解

    Flex弹性布局详解 Flex弹性布局是一种新的布局模式,可以方便地实现各种布局效果。该布局模式可以让容器的子元素自动排列,在完成一些复杂的布局工作中非常方便。 一、Flex相关的术语 在讨论Flex之前,我们先来了解一些相关的术语: Flex容器:应用flexbox布局的容器,它包含了一组flex item。 Flex项:Flex容器内的所有子元素都是Fl…

    css 2023年6月11日
    00
  • 钉钉怎么导入外部的excel表格数据?

    钉钉是一款功能强大的企业管理软件,它不仅可以帮助企业高效沟通、快速决策、高效协作,还支持多种数据导入方式。下面是详细讲解如何导入外部的Excel表格数据的完整攻略: 步骤一:打开钉钉应用 在手机或电脑上打开钉钉应用,并进入需要导入外部Excel表格数据的群聊或普通聊天窗口。 步骤二:创建数据表 点击右下角的“+”号,选择“新建表格”,进入数据表编辑页面。 步…

    css 2023年6月10日
    00
  • Vue.js 2.0 和 React、Augular等其他前端框架大比拼

    Vue.js 2.0 和 React、Angular等其他前端框架大比拼 前端框架是前端开发人员最为重要的工具之一,其中Vue.js 2.0、React和Angular是目前较为流行的三种框架。本文将分别从以下几个方面对这三种框架进行比较和分析。 性能 从性能方面来看,Vue.js 2.0 可以说是三个框架中最快的,因为Vue.js的Virtual DOM(…

    css 2023年6月9日
    00
  • CSS使用心得体会

    CSS使用心得体会 CSS是前端开发入门必学的技术,也是设计美观的网站必需的技术之一。在使用CSS的过程中,我们可以运用以下经验: 1. 使用CSS预处理器 CSS预处理器是可以帮助我们更加高效写CSS代码的工具,使用CSS预处理器可以: 减少代码量,使用嵌套语法可以实现相同效果但简写的代码 方便维护,引入变量、混合(mixin)、函数等语法,在需要修改样式…

    css 2023年6月9日
    00
  • 使用CSS3来制作消息提醒框

    下面我将详细讲解使用CSS3来制作消息提醒框的完整攻略。 准备工作 在开始制作消息提醒框之前,我们需要准备以下工作: 创建一个HTML文件,用于展示我们的消息提醒框。 引入CSS文件,我们将在其中编写消息提醒框的样式。 制作步骤 接下来,我们将按照以下步骤来制作消息提醒框。 步骤一:HTML结构 首先,我们需要在HTML文件中添加一个容器元素,用于容纳消息提…

    css 2023年6月9日
    00
  • js css3实现图片拖拽效果

    实现图片拖拽效果,可以使用HTML5中新增的drag and drop API,也可以使用JavaScript和CSS3实现。以下是基于JavaScript和CSS3实现图片拖拽效果的攻略: 前置知识 在实现图片拖拽效果前,需要掌握以下知识: 事件的监听与触发 DOM操作 CSS3 transform属性 HTML5 draggable属性 实现步骤 第一步…

    css 2023年6月13日
    00
  • css判读浏览器类型的代码

    下面是 “CSS判断浏览器类型的代码” 的详细攻略: 1. 获取浏览器类型 要判断当前浏览器的类型,我们需要了解浏览器对象模型(Browser Object Model, BOM)。BOM 是指可以通过 JavaScript 操作浏览器窗口、文档、历史记录等信息的对象组成的 API 集合。 其中,浏览器窗口对象window是最重要的BOM对象之一,我们可以通…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部