elementui遍历

遍历 Element UI 组件的方法

遍历表单元素 在 Element UI 表单中，可以通过 ref 获取表单实例，使用 validate 方法验证并遍历字段。

this.$refs.form.validate(valid => {
  if (valid) {
    const formData = this.form;
    Object.keys(formData).forEach(key => {
      console.log(key, formData[key]);
    });
  }
});

遍历表格数据 Element UI 的 el-table 组件可以通过 tableData 进行数据遍历，结合 v-for 渲染行数据。

<el-table :data="tableData">
  <el-table-column v-for="(item, index) in tableData" :key="index" :prop="item.prop" :label="item.label">
  </el-table-column>
</el-table>

遍历树形控件 对于 el-tree 组件，可以通过递归方式遍历节点数据。

function traverseTree(nodes) {
  nodes.forEach(node => {
    console.log(node.label);
    if (node.children) {
      traverseTree(node.children);
    }
  });
}

遍历下拉选项 el-select 的选项数据通常通过 options 数组进行遍历。

<el-select v-model="selected">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
  </el-option>
</el-select>

注意事项

• 使用 v-for 时必须指定唯一的 key
• 树形结构遍历时注意处理空子节点情况
• 表单遍历前建议先进行验证确保数据有效性