VueJs - 元素 UI el-select：如何获取值 parent 和 child

Question

我遇到过 el-select-group 当我使用 el-select-group 并且数据 child 是 [] 时，选项不能是 select 这是我的数据

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: ''
  }
}

预期：我想要 selected 选项，当它有孩子并且当 child 是 [] 时，它可以 selected。

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

Answer 1

有2个选项：

为您的数据添加选项

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

更改模板：

    <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>

VueJs - 元素 UI el-select：如何获取值 parent 和 child

VueJs - Element UI el-select: How to get value parent and child

selection

vuejs2

element-ui