UI设计(三)按实际输出内容递增的序号效果——东方仙盟筑基期

的 volist 标签中，即使对 $key（或索引）增加了 if 条件判断，也能实现按实际输出内容递增 的序号效果。核心思路是：不直接使用 volist 自带的 $key（原始循环索引，会包含被 if 过滤的项），而是自定义一个 "计数变量"，仅在 if 条件成立时让该变量自增。

一、问题本质：$key 的局限性

volist 自带的 $key 是原始循环的索引 （从 0 或 1 开始，由 key 属性控制），无论 if 条件是否满足，$key 都会随循环次数递增。例如：

php

// 原始数据（3条）
$list = [
    ['name' => 'A', 'status' => 0], // $key=0
    ['name' => 'B', 'status' => 1], // $key=1
    ['name' => 'C', 'status' => 1]  // $key=2
];

若用 if 过滤 status=1 的数据，直接用 $key 会出现 "跳号"（输出 1、2，而非期望的 1、2？不，若 key 从 1 开始，过滤后是 2、3，显然错误）：

html

预览

<!-- 错误示例：$key 包含过滤项，导致序号不连续 -->
<volist name="list" id="vo" key="k">
    <if condition="$vo.status eq 1">
        序号：{$k} → 名称：{$vo.name} <!-- 输出：2 → B；3 → C（错误） -->
    </if>
</volist>

二、正确实现：自定义计数变量

通过 ThinkPHP 的变量赋值标签 （{:} 或 assign）定义一个初始值为 0 的计数变量（如 $num），仅在 if 条件成立时让 $num 自增，最终输出 $num 作为序号。

1. 基础写法（直接在模板中赋值）

html

预览

<!-- 1. 初始化计数变量 $num = 0 -->
{:($num = 0)} 

<!-- 2. volist 循环原始数据 -->
<volist name="list" id="vo">
    <!-- 3. 仅当条件成立时，计数自增并输出 -->
    <if condition="$vo.status eq 1">
        {:($num++)} <!-- 自增（先输出再+1，若需从1开始，初始$num=0即可） -->
        → 名称：{$vo.name} <br>
    </if>
</volist>

输出结果（正确递增）：

plaintext

1 → 名称：B 
2 → 名称：C 

2. 进阶写法（用 assign 标签显式赋值）

若模板语法更严格，可使用 assign 标签初始化和自增变量，可读性更强：

html

预览

<!-- 初始化计数变量 -->
<assign name="num" value="0" />

<volist name="list" id="vo">
    <if condition="$vo.status eq 1">
        <!-- 计数自增（先+1再输出，避免初始0） -->
        <assign name="num" value="$num + 1" />
        序号：{$num} → 名称：{$vo.name} <br>
    </if>
</volist>

输出结果与上面一致，且逻辑更清晰（适合复杂条件场景）。

三、关键说明

1. 计数变量的作用域 ：模板中自定义的 $num 仅在当前模板片段有效，不会影响其他部分。
2. key 属性的无关性 ：此时 volist 的 key 属性（如 key="k"）可省略，因为我们不再依赖原始索引 $k。
3. 多条件判断 ：即使 if 条件包含多个逻辑（如 $vo.status eq 1 and $vo.type eq 2），只要条件成立时让 $num 自增，序号就会连续递增。

四、示例：完整场景

假设控制器传递的数据集包含 "有效 / 无效" 数据，需仅输出有效数据并带连续序号：

控制器代码（ThinkPHP 5/6 示例）

php

public function index()
{
    // 模拟数据（5条，其中3条有效）
    $list = [
        ['id' => 1, 'title' => '文章1', 'is_valid' => 0], // 无效
        ['id' => 2, 'title' => '文章2', 'is_valid' => 1], // 有效
        ['id' => 3, 'title' => '文章3', 'is_valid' => 1], // 有效
        ['id' => 4, 'title' => '文章4', 'is_valid' => 0], // 无效
        ['id' => 5, 'title' => '文章5', 'is_valid' => 1], // 有效
    ];
    $this->assign('list', $list);
    return $this->fetch(); // 渲染模板
}

模板代码（正确输出）

html

预览

<h3>有效文章列表（带连续序号）</h3>
<assign name="num" value="0" />
<volist name="list" id="vo">
    <if condition="$vo.is_valid eq 1">
        <assign name="num" value="$num + 1" />
        <p>{$num}. {$vo.title}（ID：{$vo.id}）</p>
    </if>
</volist>

最终页面输出

plaintext

有效文章列表（带连续序号）
1. 文章2（ID：2）
2. 文章3（ID：3）
3. 文章5（ID：5）

总结

在 volist 中加 if 条件后，不能直接用原始 $key 作为输出序号 ，但通过自定义计数变量并在条件成立时自增，可轻松实现 "按实际输出递增" 的效果，且兼容所有 ThinkPHP 版本

阿雪技术观

让我们积极投身于技术共享的浪潮中，不仅仅是作为受益者，更要成为贡献者。无论是分享自己的代码、撰写技术博客，还是参与开源项目的维护和改进，每一个小小的举动都可能成为推动技术进步的巨大力量

Embrace open source and sharing, witness the miracle of technological progress, and enjoy the happy times of humanity! Let's actively join the wave of technology sharing. Not only as beneficiaries, but also as contributors. Whether sharing our own code, writing technical blogs, or participating in the maintenance and improvement of open source projects, every small action may become a huge force driving technological progrss