element表单常用组件的回显总结

Checkbox 多选框

1、组件

代码：

html 复制代码

<template>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="Option A" value="Value A" />
    <el-checkbox label="Option B" value="Value B" />
    <el-checkbox label="Option C" value="Value C" />
    <el-checkbox label="disabled" value="Value disabled" disabled />
    <el-checkbox
      label="selected and disabled"
      value="Value selected and disabled"
      disabled
    />
  </el-checkbox-group>
</template>

举例显示：

2、值回显

Checkbox多选框以数组形式赋值给model回显，数组每一项的值为el-checkbox需要回显的value值。

javascript 复制代码

<script lang="ts" setup>
import { ref } from 'vue'

const checkList = ref(['Value selected and disabled', 'Value A'])
</script>

Radio 单选框

1、组件

代码：

html 复制代码

<el-radio-group v-model="paramsAdd.receivingType" @change='change' style="width: 400px">
   <el-radio value="1" >住户</el-radio>
   <el-radio value="2" >内部</el-radio>
</el-radio-group>

举例显示：

2、值回显

绑定的receivingType值赋值需要回显的el-radio对应的value值即可。

TypeScript 复制代码

paramsAdd.value.receivingType= '1'

Select 选择器

1、组件

代码：

html 复制代码

<el-select placeholder="公告类型" v-model="searchUnit.type" clearable >
    <el-option v-for="item in dicList.noticeType" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

举例显示：

2、值回显

绑定的searchUnit.type赋值需要回显的el-option对应的value值即可。

DateTimePicker 日期时间选择器

1、组件

代码：

html 复制代码

 <el-date-picker  v-model="dayList"  type="datetimerange"  range-separator="---"  format="YYYY-MM-DD"   value-format="YYYY-MM-DD" 
:start-placeholder="languageServe.startTime"  :end-placeholder="languageServe.endTime" style="width: 280px"/>

举例显示：

2、值回显

因为有起始和结束时间，所以绑定值dayList是一个数组，回显只需在数组对象中赋值标准格式时间即可。

TypeScript 复制代码

    dayList.value[0] = '2026-06-17'
    dayList.value[1] = '2026-06-23'

如果只需绑定单个时间。为绑定值赋值字符串标准格式时间即可。

TypeScript 复制代码

    dayList.value = '2026-06-17'

Cascader 级联选择器

1、组件

代码：

html 复制代码

<el-cascader v-model="elcValue" :options="options" @change="handleChange" />

举例显示：

2、值回显

回显需保证options有值的情况下，以数组形式一层层对应。以上图显示为例，则elcValue = $"5"，"7"，"11"，"228"$ ，数组项依次为options中从父级到子级每一层的value值。

options的结构示例(与上图的options不是同一个)：

若需定位到整个父级组，例如1区 / 3栋 / 1单元，则elcValue = $"5"，"7"，"11"$

3、补充

若使Cascader组件能够选择整个父级组，需添加props属性。设置 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。

html 复制代码

<template>
    <el-cascader :options="options" :props="props1" clearable />
</template>

<script lang="ts" setup>

const props1 = {
  checkStrictly: true,
}
//其他代码省略
//....
//....
</script>

通过lazy开启动态加载，并通过lazyload来设置加载数据源的方法。但动态加载在页面初次加载时很难实现值的回显。