Element ui table列循环问题

Question

table列有多个字段，在两个字段间加一个竖线|分隔，使用span包裹，结尾不加，写法如下，为什么不生效？

<el-table-column label="分组" width="200" align="center" key="groupName" prop="groupName"
                    >
   <template slot-scope="scope">
       <span v-for="(item, index) in scope.row.projectGroups" class="f-fontBlue"　@click="handleUpdate(scope.row)">{{ item.groupName }}<span v-if="index === scope.row.projectGroups.length">｜</span></span>
   </template>
</el-table-column>

就是这一句：

<span v-if="index === scope.row.projectGroups.length">,</span>

Answer 1

<el-table-column
              label="分组"
              width="200"
              align="center"
              key="groupName"
            >
              <template slot-scope="scope">
                <span
                  v-for="(item, index) in scope.row.projectGroups"
                  :key="index"
                  class="f-fontBlue"
                  @click="handleUpdate(scope.row)"
                >
                  {{ item.groupName }}
                  <span
                    v-if="
                      scope.row.projectGroups.length > 1 &&
                        index !== scope.row.projectGroups.length - 1
                    "
                    >｜</span
                  ></span
                >
              </template>
            </el-table-column>