设置el-form-item在页面最右边

### 使用 Flex 布局实现 `el-form-item` 对齐

为了使 `el-form-item` 组件对齐到页面右侧，在 Element UI 中可以利用 CSS 的 Flexbox 属性来调整布局。具体方法是在包裹 `el-form-item` 的容器上应用样式，设置其为 flex 容器并指定子项的排列方式。

<template>
  <div class="right-align-container">
    <!-- 表单 -->
    <el-form :model="form" ref="form" label-width="80px">
      <el-row type="flex" justify="end"> <!-- 设置弹性盒子模型并对齐至末端 -->
        <el-col :span="6">
          <el-form-item label="名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: ''
      }
    };
  },
};
</script>

<style scoped>
.right-align-container .el-row {
  display: flex;
}
</style>

上述代码片段展示了如何创建一个表单项并将它放置于页面右端[^2]。这里的关键在于 `<el-row>` 标签中的两个属性：

- `type="flex"`：定义该行作为弹性盒模型容器；
- `justify="end"`：控制子元素沿主轴方向上的分布位置，取值 "end" 表示靠右对齐。

此外，还设置了 `.right-align-container .el-row` 类选择器下的内联样式 `display: flex;` 来确保即使在某些情况下默认行为被覆盖也能正常工作。