el-checkbox如何再中间加个|

要在el-checkbox中间加一个竖线（|），可以使用自定义的label模板来实现。在el-checkbox标签中，使用slot插槽来自定义label模板。具体步骤如下：

1. 在el-checkbox标签中，添加slot="label"属性。
2. 在el-checkbox标签的内部，添加一个div元素，并设置样式为display: flex; align-items: center;。
3. 在div元素内部，添加两个span元素，分别用于显示复选框的文本和竖线。
4. 使用CSS样式来设置竖线的样式，可以设置border-left属性来绘制竖线。

以下是一个示例代码：

<template>
  <el-checkbox>
    <div slot="label" style="display: flex; align-items: center;">
      <span>复选框文本</span>
      <span class="vertical-line"></span>
    </div>
  </el-checkbox>
</template>

<style>
.vertical-line {
  border-left: 1px solid #000;
  height: 12px;
  margin: 0 10px;
}
</style>

通过以上代码，你可以在el-checkbox的文本和复选框之间添加一个竖线。你可以根据需要自定义竖线的样式和位置。

相关问题

<el-checkbox label="1" id="checkbox1">PC端</el-checkbox> <el-checkbox label="2" id="checkbox2">小程序</el-checkbox> <el-checkbox label="4" id="checkbox3">公用</el-checkbox> 这种写法可以吗

这种写法是完全可以的。这里的 `label` 属性表示了多选框的值，可以使用对应的位运算值（1、2、4）来表示不同的选项。而 `id` 属性则可以用于在 JavaScript 中获取和操作多选框。

例如，你可以使用以下方式来获取多选框的选中情况：

let platform = 0;
if (document.getElementById('checkbox1').checked) {
  platform |= 1;
}
if (document.getElementById('checkbox2').checked) {
  platform |= 2;
}
if (document.getElementById('checkbox3').checked) {
  platform |= 4;
}
console.log(platform); // 输出选中的选项的值的按位或结果

这里使用了 `document.getElementById` 方法来获取多选框的 DOM 元素，然后使用 `checked` 属性来判断是否选中。最终使用按位或运算符 `|` 将选中的选项的值进行组合，得到最终的选中情况。

<el-checkbox-group v-model="needRadio"> <el-checkbox label="1">需要转场</el-checkbox> <el-checkbox label="2">需要还箱</el-checkbox> </el-checkbox-group>为啥needRadio的值为[1]，但是需要转场没有勾选上

在 Element UI 中，`<el-checkbox-group>` 组件的 `v-model` 绑定的是一个数组，数组中的元素表示哪些多选框被选中了。而多选框的 `label` 属性则表示该多选框的值，当该多选框被选中时，该值会被加入 `v-model` 绑定的数组中。

因此，当 `needRadio` 的值为 `[1]` 时，说明 label 值为 1 的多选框被选中了，而 label 值为 2 的多选框没有被选中。这也就是为什么“需要转场”没有被勾选上的原因。

需要注意的是，`<el-checkbox-group>` 组件的 `v-model` 绑定的是一个数组，该数组中的元素顺序与多选框在界面中出现的顺序无关。只有多选框的 `label` 值与数组中的元素值相等时，该多选框才会被视为被选中。