代码之家 › 专栏 › 技术社区 › dede.brahma

VueJs-元素UI el select:如何获取值父级和子级

element-ui selection vuejs2

dede.brahma · 技术社区 · 6 年前

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

预期:当有children和child为[]时,我希望选择选项,可以选择它。

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

1 回复 | 直到 6 年前

Regolith Luciens 3 年前

有两种选择:

为数据添加选项

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

推荐文章

muzzie · Javascript createRange。如何仅使用一个脚本选择不同的跨距?

7 年前

Harrison Cramer · 在D3中操纵不透明度和文本。js公司

7 年前

Zenoo · 自定义SO的代码段选择背景

7 年前

pradeepradyumna · C#Listview避免默认行选择[重复]

7 年前

Nilambari · Vaadin无法在组合框值更改时更新网格容器

7 年前

Thundersheep · 变量的子选择

7 年前

Tobi · Contenteditable:如何在按del或backspace时完全删除span

7 年前

Osti · 禁用在DatagridComboBox中选择特定项

7 年前

Omar Boshra · 在edittext中更改文本之前获取光标起始索引

7 年前

vasf · 使用javascript的文本选择在chromium中不可见

7 年前