Vue 使用 elementUI 表单中下拉框和单选按钮传值和回显问题

Vue 使用 elementUI 表单中下拉框和单选按钮传值和回显问题

	数据库 字段为int类型

1. select下拉框:

	1. 根据v-model绑定值
	2. label:下拉框显示的文字
	3. value:表单提交数据下拉框的值 如果提交int类型需要使用v-bind绑定 简写为':'
	4. 下拉框必须有value属性,label属性可以不有,如果没有label的话默认和value值相同
	<el-form-item label="部门" prop="department">
	    <el-select type="number" v-model="userInfo.department" placeholder="请选择车辆使用状态">
	        <el-option label="运营部" :value="0">运营部</el-option>
	    	<el-option label="人事部" :value="1">人事部</el-option>
	    </el-select>
	</el-form-item>

请添加图片描述
请添加图片描述

2. radio 单选框:

	<el-form-item label="性别" prop="sex">
	    <el-radio-group v-model="userInfo.sex">
	        <el-radio :label="1">男</el-radio>
	        <el-radio :label="0">女</el-radio>
	    </el-radio-group>
	</el-form-item>
	1. 使用v-model绑定值
	2. label代表表单提交按钮选中提交的值
	3. 如果需要传int类型的值需要使用v-bind绑定 简写为 “:”

请添加图片描述
在这里插入图片描述

  • 8
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
VueElementUI库提供了一个非常实用的树形下拉框组件,可以用于展示树形结构的数据并且支持选择功能。 树形下拉框可以帮助我们展示层次化的数据结构,比如组织架构、目录结构等。ElementUI的树形下拉框组件提供了丰富的配置项,我们可以自定义树形的图标、节点的样式以及行为。 使用ElementUI的树形下拉框组件非常简单。我们只需要在Vue实例引入ElementUI库,并在页面使用`<el-cascader>`标签即可。通过传递相应的数据和配置项,我们就能够快速构建一个树形下拉框。 在使用树形下拉框时,我们可以通过配置`props`属性来提供数据源。ElementUI的树形下拉框支持三种类型的数据格式:`value`、`label`、`children`。其,`value`代表节点的值,`label`代表节点的显示文本,`children`代表子节点的数据。 除了数据源,我们还可以配置`expand-trigger`属性来指定展开节点的触发方式,默认是点击节点展开。如果我们希望鼠标悬浮在节点上时展开节点,我们可以将`expand-trigger`设置为`hover`,这样用户就可以通过鼠标悬浮来展开节点了。 总之,VueElementUI树形下拉框组件为我们展示树形结构的数据提供了非常便利和灵活的方式。无论是展示组织架构、目录结构,还是其他层次化的数据,我们都可以通过这个组件轻松实现。它的简单易用和丰富的配置项,让我们能够轻松满足各种业务需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

桂秋拾貳.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值