el-checkbox 有多个复选框 ，如何在第二个复选框和第三个复选框之间添加一个 | 分割

如果你想在第二个复选框和第三个复选框之间添加一个竖线（|）分割，你可以使用v-for指令来循环渲染el-checkbox组件，并在相应位置插入竖线。以下是一个示例代码：

<template>
  <div>
    <el-checkbox v-for="(item, index) in checkboxList" :key="index">
      <div slot="label" style="display: flex; align-items: center;">
        <span>{{ item.label }}</span>
        <span v-if="index !== checkboxList.length - 1" class="vertical-line"></span>
      </div>
    </el-checkbox>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkboxList: [
        { label: '复选框1' },
        { label: '复选框2' },
        { label: '复选框3' }
      ]
    };
  }
};
</script>

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

在上述代码中，通过v-for指令循环渲染checkboxList数组中的每个元素，并在每个el-checkbox的label模板中判断当前索引是否为checkboxList数组的最后一个元素，如果不是则插入竖线。通过这种方式，你可以在第二个复选框和第三个复选框之间添加一个竖线分割。记得根据实际需求修改checkboxList数组的内容和数量。