el-select多选情况下回显的问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了el-select多选情况下回显的问题相关的知识,希望对你有一定的参考价值。

参考技术A 问题:el-select在设置multiple(复选)的情况下,无法回显

预期:

错误:

其实这个问题的错误原因是数据类型的问题。

正常数据类型:

接口上返回的回显数据:

接口数据转换后:

id在list中是Number类型,但是在回显的数据中,我们转成了 String类型。 导致Element无法识别

接下来试试看,先转换数据为Number类型:

运行效果:

已达到我们预期的效果。 问题出在数据类型不统一的问题上。

elementUI el-select 多选情况下包含全部选项,及获得选中项的label

<template>
    <div>
    <span style="margin-left:30px;font-weight:bolder;">教练:
        <el-select v-model="staffId" 
          placeholder="请选择"
          multiple
          collapse-tags
          @change="changeStaff"
          style="width:180px">
          <el-option
            v-for="(item, key) in staff"
            :key="key"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>  
      </span>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        staffId: [-1],
        isContainAll: true,
        staffNmae: [],
        staff:  [
          { ‘value‘: -1, ‘nameCn‘: ‘全部‘ },
          { ‘value‘: 1, ‘nameCn‘: ‘张三‘ },
          { ‘value‘: 2, ‘nameCn‘: ‘李四‘},
          { ‘value‘: 3, ‘nameCn‘: ‘王五‘ },
          { ‘value‘: 4, ‘nameCn‘: ‘潇潇‘ },
          { ‘value‘: 5, ‘nameCn‘: ‘小美‘},
          { ‘value‘: 6, ‘nameCn‘: ‘赵琴‘ },
          { ‘value‘: 7, ‘nameCn‘: ‘张玲‘ }
        ]
      }
    },
    methods: {
      // 定义一个变量,用来存储当前下拉框是否选中了全部
      if (this.isContainAll) {
        // 只有下拉框的值发生了变化才会进入此方法
        // 如果之前选中了全部,则变化后肯定不包含全部了
        this.isContainAll = false
        // 则删除第一个全部
        this.staffId.splice(0, 1)
      } else {
        // 如果之前没有选中全部
        // 判断此次是否选中了全部
        this.isContainAll = this.staffId.some(value => value === -1)
        // 如果此次选中了全部
        if (this.isContainAll) {
          // 则去除其他,只保留全部,默认value=-1 是全部
          this.staffId = [-1]
        } else {
          // 如果当前不包含全部,则判断是否其他的七个日期全选了
          if (this.staffId.length === this.staff.length - 1) {
            // 如果其他员工全选了,则也将当前置为全部
            this.staffId = [-1]
            this.isContainAll = true
          }
        }
      }
      // 当没有选中任何教练时,将当前置为全部
      if (this.staffId.length === 0) {
        this.staffId = [-1]
        this.isContainAll = true
      }
      // 如果选择全部
      if (this.isContainAll === true) {
        this.staffName = [‘全部‘]
      } else {
        // 获得选中教练的姓名
        for (let i = 0; i < this.staffId.length; i++) {
          let obj = this.staff.find((item) => {
            return item.value === this.staffId[i]
          })
          this.$set(this.staffName, i, obj.label)
        }
      }
  }
</script>

以上是关于el-select多选情况下回显的问题的主要内容,如果未能解决你的问题,请参考以下文章

解决el-select多选时,文字过多换行的问题

记一次诡异的bug

记一次诡异的bug

vue el-select 全选 多选

el-select下拉框多选远程搜索反显

Vue踩坑之 el-select下拉框多选,选择后赋值成功,输入框不显示选中的值