Vue2 列表渲染

---

前言

提示：这里可以添加本文要记录的大概内容：

在 Vue 中，列表渲染是通过 v-for 指令实现的，用于基于数据源动态生成重复的 DOM 元素或组件。

1. 始终使用唯一的 key，避免使用索引
2. 复杂列表组件化：将列表项封装为独立组件
3. 大数据量优化：使用虚拟滚动 + 分页加载
4. 保持数据纯净：不要在渲染过程中修改原始数据
5. 合理使用计算属性：对列表数据进行预处理
6. 添加过渡动画：使用 提升用户体验

---

通过合理运用这些列表渲染技巧，可以构建出既高效又易维护的动态列表界面。在你的权限管理模块中，可以进一步：

• 将操作权限标签封装为独立组件
• 添加拖拽排序功能
• 实现权限项的批量操作
• 增加列表项的骨架屏加载效果

---

一、基础用法

1. 基本数组渲染

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index }} - {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' }
      ]
    }
  }
}
</script>

2. 对象属性渲染

<template>
  <ul>
    <li v-for="(value, key, index) in obj" :key="key">
      {{ index }}. {{ key }}: {{ value }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      obj: { name: 'John', age: 30 }
    }
  }
}
</script>

---

关键特性解析

1. :key 的重要性

• 唯一标识：帮助 Vue 识别节点身份，优化虚拟 DOM 的复用
• 最佳实践：推荐使用数据唯一标识（如 id），避免使用数组索引

2. 响应式更新

• 数组更新检测：
  • 触发视图更新的方法：push(), pop(), shift(), unshift(), splice(), sort(), reverse()
  • 不会触发视图更新：直接通过索引修改项（需使用 Vue.set 或 splice）

二、在项目中的典型应用

1. 表格数据渲染

<s-table :columns="columns" :data="loadData">
  <!-- 嵌套列表渲染 -->
  <template #actions="{ record }">
    <a-tag v-for="action in record.actionList" :key="action.value">
      {{ action.label }}
    </a-tag>
  </template>
</s-table>

2. 动态表单生成

<div v-for="(field, index) in formFields" :key="field.id">
  <input 
    v-model="field.value"
    :placeholder="field.placeholder"
  >
  <button @click="removeField(index)">删除</button>
</div>

3. 级联选择器

<a-cascader :options="options">
  <template v-for="level in [1,2,3]">
    <a-select-option 
      v-for="item in getLevelData(level)"
      :key="item.value"
      :value="item.value"
    >
      {{ item.label }}
    </a-select-option>
  </template>
</a-cascader>

---

三、常见问题解决方案

1. 数据更新视图不刷新

this.$set(this.items, 0, newItem)
// 或
this.items.splice(0, 1, newItem)

2. 动态过滤/排序

<template>
  <div v-for="item in filteredList" :key="item.id">
    {{ item.name }}
  </div>
</template>

<script>
export default {
  computed: {
    filteredList() {
      return this.items.filter(item => item.active)
    }
  }
}
</script>

3. 空状态处理

<template>
  <div v-if="items.length === 0" class="empty-state">
    暂无数据
  </div>
  <div v-else v-for="item in items" :key="item.id">
    {{ item.name }}
  </div>
</template>

---

四、 案例

以下是整理后的列表渲染相关代码：

<!-- 列表渲染核心代码汇总 -->

<!-- 1. 主表格列表渲染 -->
<s-table 
  :columns="columns" 
  :data="loadData"
>
  <!-- 表格列定义 -->
  <template>
    <!-- 其他列... -->
    
    <!-- 2. 嵌套标签列表渲染 -->
    <span slot="actions" slot-scope="text, record">
      <a-tag 
        v-for="(action, index) in record.actionList" 
        :key="index"
      >
        {{ action.describe }}
      </a-tag>
    </span>
  </template>
</s-table>

<!-- 3. 权限选择器选项列表渲染 -->
<a-select-option 
  v-for="(action, index) in permissionList" 
  :key="index" 
  :value="action.value"
>
  {{ action.label }}
</a-select-option>

<script>
// 相关数据定义
export default {
  data() {
    return {
      // 表格列配置（主列表结构）
      columns: [
        {
          title: '唯一识别码',
          dataIndex: 'id'
        },
        {
          title: '权限名称',
          dataIndex: 'name',
        },
        {
          title: '可操作权限',
          dataIndex: 'actions',
          scopedSlots: { customRender: 'actions' }, // 关联嵌套列表渲染
        },
        // ...其他列
      ],

      // 权限选项数据源
      permissionList: [
        { label: '新增', value: 'add' },
        { label: '查询', value: 'get' },
        { label: '修改', value: 'update' },
        // ...其他权限项
      ]
    }
  },

  methods: {
    // 主列表数据加载
    loadData: parameter => {
      return this.$http.get('/mock/api/permission')
        .then(res => {
          res.result.data.forEach(permission => {
            // 准备嵌套列表数据
            permission.actionList = JSON.parse(permission.actionData)
          })
          return res.result
        })
    },

    // 权限选项加载（演示用）
    loadPermissionList() {
      this.permissionList = [
        { label: '新增', value: 'add' },
        { label: '查询', value: 'get' },
        // ...其他权限项
      ]
    }
  }
}
</script>

关键代码说明：

1. 主表格渲染：

<s-table :columns="columns" :data="loadData">

• 通过 columns 定义表头结构
• 通过 loadData 方法加载表格数据

2. 嵌套标签列表：

<a-tag v-for="(action, index) in record.actionList" :key="index">

• 使用 v-for 循环渲染每个权限的操作标签
• 基于 actionList 数据生成多个标签元素

3. 权限选择器选项：

<a-select-option v-for="(action, index) in permissionList" ...>

• 遍历 permissionList 生成下拉选项
• 每个选项对应一个权限操作

4. 数据准备：

permission.actionList = JSON.parse(permission.actionData)

• 将接口返回的字符串转换为可渲染的数组数据
• 为嵌套列表渲染提供数据源