VueJs - 元素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>