vue element-ui el-checkbox 左右排列

在 Vue.js 中结合 Element UI 的 `el-checkbox` 组件想要实现左右并排布局，你可以通过 CSS 样式调整来实现。`el-checkbox`本身是一个内联元素，但你可以利用一些技巧使其外层包裹元素可以自定义样式。

首先，在 HTML 上创建两个独立的 `el-checkbox` 元素，分别放置在需要的位置：

<template>
  <div class="custom-checkbox-container">
    <el-checkbox label="Option 1" @change="handleChange">左侧</el-checkbox>
    <el-checkbox label="Option 2" @change="handleChange">右侧</el-checkbox>
  </div>
</template>

然后，给 `.custom-checkbox-container` 类添加相应的 CSS 规则：

.custom-checkbox-container {
  display: flex;
  align-items: center; /* 如果需要上下居中 */
  justify-content: space-between; /* 使两者间留空 */
}

/* 如果想让 checkbox 宽度一致，可以设置一个统一的宽度，如这里设置为50px */
.el-checkbox__input {
  width: 50px;
}

这样，你就实现了两个 `el-checkbox` 按左右顺序并排放置，并且可以根据实际需求调整容器的其他样式，比如间距、颜色等。记得在组件实例上监听 `@change` 事件，处理复选框状态的变化。