VueJs - Element UI el-select：如何获取价值父母和孩子

Question

我有 el-select-group 的案例 当我使用 el-select-group 和数据时，孩子是 []，无法选择选项 这是我的数据

data() {
  return {
    options3: [{
      label: 'Popular cities',
      options: [{
        value: 'Shanghai',
        label: 'Shanghai'
      }, {
        value: 'Beijing',
        label: 'Beijing'
      }]
    }, {
      label: 'Indonesia',
      options: [{
        value: 'Jakarta',
        label: 'Jakarta'
      }, {
        value: 'Bandung',
        label: 'Bandung'
      }]
    }, {
      label: 'Singapore',
      options: []
    }, {
      label: 'Thailand',
      options: []
    }],
    value7: ''
  }
}

预期：当它有孩子时我想要选择的选项，当孩子是[]时，它可以被选中。

这是我的代码 https://jsfiddle.net/dede402/jruzj07d/

Answer 1

有两种选择：

1. 为您的数据添加选项

   {
     label: 'Singapore',
     options: [{
     value: 'Singapore',
     label: 'Singapore'
    }]
   }
   

2. 更改模板：

    <template>
      <el-select v-model="value7" placeholder="Select">
        <template v-for="group in options3">
           <el-option-group v-if="group.options.length > 0" :key="group.label" :label="group.label">
          <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-option-group>
          <el-option v-else :key="group.label" :label="group.label" :value="group.label">
          </el-option>
       </template>
      </el-select>
    </template>