el-option 两层循环

在使用Element UI的<el-select>和<el-option>组件时，若需要实现两层循环来展示嵌套数据，例如省市区选择，可以通过在<el-option>内部使用v-for嵌套来实现。这里提供一个基本示例来说明如何操作：

假设的数据结构

首先，假定你有如下嵌套数据结构，代表省市区信息：

const cityData = [
  {
    label: '省份A',
    children: [
      { label: '城市A1', value: 'cityA1' },
      { label: '城市A2', value: 'cityA2' }
    ]
  },
  {
    label: '省份B',
    children: [
      { label: '城市B1', value: 'cityB1' },
      { label: '城市B2', value: 'cityB2' }
    ]
  }
];

Vue模板中的实现

接下来，在Vue的模板中，你可以这样使用两层v-for来遍历并渲染这个数据结构：

<template>
  <el-select v-model="selectedCity" placeholder="请选择">
    <el-option
      v-for="province in cityData"
      :key="province.label"
      :label="province.label"
      :value="province.label"
      :disabled="true" <!-- 省份不可选，仅作为分组 -->
    >
      <el-option
        v-for="city in province.children"
        :key="city.value"
        :label="city.label"
        :value="city.value"
      ></el-option>
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedCity: '',
      cityData: [
        // ... 上面定义的cityData
      ]
    };
  }
};
</script>

注意事项

• 上述代码中，外层的<el-option>设置了:disabled="true"来防止省份本身被选中，因为我们的目标是让用户选择具体的城市。
• 这种方式在Element UI中可能不会直接生效，因为<el-option>并不直接支持嵌套<el-option>作为其内容。对于多级选择的需求，Element UI提供了专门的组件如<el-cascader>来更好地处理这类场景。但是，如果你确实需要通过这样的方式来展示数据，可能需要自定义实现或者寻找其他UI库的支持，因为标准的Element UI <el-select>组件设计上不支持直接的嵌套选项展现。