el-select回显、el-checkbox-group回显

最新推荐文章于 2024-08-16 17:52:56 发布

原创最新推荐文章于 2024-08-16 17:52:56 发布 · 3.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

vue 专栏收录该内容

4 篇文章

订阅专栏

本文详细讲解了如何在 Vue 中使用 Element UI 的 el-select 和 el-checkbox-group 控件实现回显功能，特别强调了当value和v-model值类型一致的重要性，包括数字类型的正确匹配和数组的对应处理。

el-select回显、el-checkbox-group回显

1、el-select回显

！注意：回显需要:value的值和v-model的值 === （全等于），意思就是类型也必须相同。

            <el-form-item prop="reportDate" label="周报生成日期">
              <el-select
                v-model="form.reportDate" // 回显给form.reportDate值必须时number
                clearable
                placeholder="请选择日期"
              >
                <el-option
                  v-for="(item, index) in dataList"
                  :key="index"
                  :label="item.label"
                  :value="item.value" // 这里是number类型
                >
                </el-option>
              </el-select>
            </el-form-item>

2、el-checkbox-group 回显

！注意：回显也一样需要注意:label中的值需要和v-model中的值===（全等于），也就是类型必须相同

            <el-form-item prop="date" label="场地利用率日期">
              <el-checkbox-group v-model="form.date"> //form.date回显的数据也必须是数组且数组中的值都是number
                <el-checkbox
                  v-for="item in dataList" // dataList这个里面是数组且数组中是number
                  :key="item"
                  style="margin-right: 40px"
                  :label="item.value" // v-for之后item.value的值必须是number
                  >{{ item.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>