剖析 Element UI 多选框：数据回显、ID 显示与数据修改

前端

2024-01-18 19:03:43

浅析问题

初次接触 Element UI 多选框，难免会遇到一些棘手的问题。比如：

数据无法回显：明明在代码中设置了回显数据，但页面上却没有显示出来。
数据回显只显示数字 ID：明明配置了选项标签，但回显时只显示了数字 ID，而不是对应的标签内容。
无法修改数据：试图修改多选框中的数据，却报出 value.push is not a function 的错误。

抽丝剥茧，逐一击破

数据无法回显

这种情况往往是由于未正确设置 value 属性引起的。value 属性是多选框的绑定值，用于指定选中的选项。如果 value 属性未设置或设置不正确，就会导致数据无法回显。

为了解决这个问题，需要确保 value 属性的值与选项的 value 属性相匹配。同时，需要确保 value 属性是一个数组，因为多选框可以同时选中多个选项。

<el-select v-model="selectedOptions" multiple>
  <el-option
    v-for="option in options"
    :key="option.value"
    :label="option.label"
    :value="option.value"
  />
</el-select>

const app = new Vue({
  el: '#app',
  data: {
    selectedOptions: ['apple', 'banana'],
    options: [
      { value: 'apple', label: '苹果' },
      { value: 'banana', label: '香蕉' },
      { value: 'orange', label: '橘子' }
    ]
  }
})

数据回显只显示数字 ID

这种情况通常是由于未正确设置 option-label 属性引起的。option-label 属性用于指定选项的显示内容。如果 option-label 属性未设置或设置不正确，就会导致数据回显时只显示数字 ID。

为了解决这个问题，需要确保 option-label 属性的值与选项的 label 属性相匹配。

<el-select v-model="selectedOptions" multiple>
  <el-option
    v-for="option in options"
    :key="option.value"
    :label="option.label"
    :value="option.value"
  />
</el-select>

const app = new Vue({
  el: '#app',
  data: {
    selectedOptions: ['apple', 'banana'],
    options: [
      { value: 'apple', label: '苹果' },
      { value: 'banana', label: '香蕉' },
      { value: 'orange', label: '橘子' }
    ]
  }
})

无法修改数据

这种情况一般是由于未正确设置 multiple 属性引起的。multiple 属性用于指定多选框是否允许多选。如果 multiple 属性未设置或设置为 false，就会导致无法修改数据。

为了解决这个问题，需要确保 multiple 属性设置为 true。

<el-select v-model="selectedOptions" multiple>
  <el-option
    v-for="option in options"
    :key="option.value"
    :label="option.label"
    :value="option.value"
  />
</el-select>

const app = new Vue({
  el: '#app',
  data: {
    selectedOptions: ['apple', 'banana'],
    options: [
      { value: 'apple', label: '苹果' },
      { value: 'banana', label: '香蕉' },
      { value: 'orange', label: '橘子' }
    ]
  }
})