element 表单动态获取性别

最新推荐文章于 2023-04-16 23:23:13 发布
最新推荐文章于 2023-04-16 23:23:13 发布
阅读量2.4k 收藏 4
点赞数 2
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gradonisis/article/details/111150516
版权

element 动态获取性别


在前端页面里总是会有根据1和2显示相应的内容，我是小白刚接触这些就感觉无能为力，找了一些资料才有了解决方法，话不多说上代码： 

     <el-form-item label="性别" prop="gender">
                    <el-select v-model="form.gender" placeholder="请选择"  style="width: 40%;">
                       <el-option :value="0" label="男"></el-option>
                        <el-option :value="1" label="女"></el-option>
                    </el-select>
                </el-form-item>

这就是利用v-bind解决方法

权是
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui.rar element-ui核心库压缩包
12-20
element-ui.rar element-ui核心库压缩包
Vue+Element实现动态生成新表单并添加验证功能
10-16
主要介绍了Vue+Element实现动态生成新表单并添加验证功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
ElementUI中的el-form怎样格式化显示1和0为男和女
m0_57202083的博客
10-15 2444
<el-table-column prop="studentSex" label="学生性别" width="180" :formatter="sexf"> </el-table-column> methods方法中加入 第一种方式： sexf: function( row, index) { if (row.studentSex == 1) { return "男"; ..
element-ui校验身份证，根据身份证获取性别，年龄，生日，地区
weixin_45670398的博客
05-06 1972
性别默认为禁止状态 当用户输入身份证 自动识别男女 <template> <div class="addBox"> <el-form :model="baseInfo" :rules="rules" ref="ruleForm" label-width="100px" ...
Element Ui 中如何的用el-radio来表示性别和Vue中对象有对象如何读取值
weixin_46093962的博客
02-13 1662
Element Ui 中的用el-radio来表示性别。 今天做一个demo要修改性别我数据库中存放的男女是boolean值，然后 v-model=“editUserForm.sex” :label=true radio 里面的 label 居然和value绑定。而且如果加上 ""引号那就是字符串。 关于vue中对象中有对象 <p v-if="userInfo.role != undefined">当前角色：{{userInfo.role.type}}</p> 必须要加
vue+elementui 如何设置radio默认选中
热门推荐
nsnydnz的博客
10-15 2万+
vue+elementuiel-radio单选框默认选中以及v-model绑定值问题 需求描述： 弹窗里面的表单，是复用的后台返回数据，输入框里面的数据复用很容易，通过prop属性即可。 问题在于radio单选框，怎么将后台给的数值绑定为默认值 文章目录vue+elementuiel-radio单选框默认选中以及v-model绑定值问题需求描述：示例效果图：涉及知识：补充：类似案例效果： 示例效果图： 涉及知识： 一、【elment-ui】radio 单选框中的 label 属性 误区： 1、误以为 va
vue element ui 后端接收0、1在前端table中转换为男、女
qq_52107354的博客
04-07 452
【代码】vue element ui 后端接收0、1在前端table中转换为男、女。
ElementUl中的el-table怎样吧0和1改变为男和女
aaqia的博客
10-09 1034
<el-table-column prop="studentSex" label="性别" :formatter="sex"></el-table-column> 然后就在vue的methods中写方法就OK了 methods: { sex(row,index){ if(row.studentSex == 1){ return '男'; }else{ return '女'; }...
怎么更改el-form-item中的性别
weixin_46511995的博客
02-13 300
使用element-ui修改源数据
Vue-ElementUI el-table表格中根据后端获取的0、1、2显式对应性别中文（未知、男、女）
qq_40905896的博客
04-09 4623
Data接受后端传来的List数据： el-table将list数据单向绑定 表格中性别字段显式： 显示效果：
Vue elementUI中把数据库中的1,0转成男女
qq_44641517的博客
02-05 4990
一定要设置template 的slot-scope="scope" <el-table-column prop="gender" label="性别" show-overflow-tooltip > <template slot-scope="scope"> <sp..
基于Vue和Element UI的动态表单组件设计源码
最新发布
04-15
基于Vue和Element UI的动态表单组件设计源码，该项目包含217个文件，主要文件类型有95个Vue前端文件，78个JavaScript文件，10个json配置文件，6个gif动画文件，5个Markdown文档，5个HTML页面文件，4个CSS样式文件，3...
vue+element创建动态的form表单及动态生成表格的行和列
10-16
主要介绍了vue+element创建动态的form表单及动态生成表格的行和列 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）
01-19
Element动态增减表单,在线代码 关键配置 template中,form和form-item的写法和绑定 data里的值为空 methods中，向后台获取数据的函数写法  1. form,form-item,input的写法[^code] <el-form-item :key=...
Vue~~
洛尘的博客
08-19 3086
Vue
5Element
ai大力的小杰
04-16 425
一、Element-快速入门 1、安装ElementUi组件库 输入npm install element[email protected] 2、引入ElementUi组件库 https://element.eleme.cn/#/zh-CN/component/quickstart //引入element-ui import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
HTML+CSS+JavaScript
qq_43208820的博客
06-13 494
HTML
渲染数值为对应的文字
一株木樨的博客
12-03 322
编辑页面传值是value，详情页面显示value对应的文字 需求：在编辑弹框里面选择性别时 有三个选项 男，女，保密 婚姻状况可选已婚，未婚，是否驻勤可选是，否，当传递到后台的时候是传递的对应的value，在详情展示的时候显示的是value对应的汉字。由于使用的是elementui-ui,我将所有的信息写在了一个el-row中，直接遍历一个对象数组。那么就涉及到值的回显 效果展示： 详情展示编辑弹框: 具体实现： userInfo: [ { name: '性别', value: 'gend
Vue入门
weixin_44960905的博客
05-31 754
1. 第一个Vue程序 <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <
vue3和element plus动态表单
06-11
Vue3和Element Plus可以很方便地实现动态表单。下面是一个简单的示例代码： ``` <template> <form @submit.prevent="submitForm"> <el-form :model="formData" :rules="formRules" ref="form"> <el-form-item v-for="(field, index) in formFields" :key="index" :label="field.label" :prop="field.name"> <template v-if="field.type === 'text'"> <el-input v-model="formData[field.name]" :placeholder="field.placeholder"></el-input> </template> <template v-else-if="field.type === 'select'"> <el-select v-model="formData[field.name]" placeholder="请选择"> <el-option v-for="option in field.options" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> </template> <!-- 其他表单项类型 --> </el-form-item> </el-form> <el-button type="primary" native-type="submit">提交</el-button> </form> </template> <script> import { ref } from 'vue' import { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton } from 'element-plus' export default { components: { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton }, setup() { const formData = ref({}) const formFields = [ { type: 'text', name: 'username', label: '用户名', placeholder: '请输入用户名' }, { type: 'select', name: 'gender', label: '性别', options: [ { value: 'male', label: '男' }, { value: 'female', label: '女' } ]}, // 其他表单项数据 ] const formRules = ref({}) formFields.forEach(field => { formData.value[field.name] = '' formRules.value[field.name] = { required: true, message: '请输入' + field.label, trigger: 'blur' } }) const submitForm = () => { // 表单验证 const form = this.$refs.form form.validate(valid => { if (valid) { // 获取表单数据 const data = JSON.stringify(formData.value) // 处理表单数据 // ... } else { return false } }) } return { formData, formFields, formRules, submitForm } } } </script> ``` 在上面的代码中，我们使用了Element Plus的表单组件来生成表单项。在Vue3中，我们使用了`ref`来获取表单实例，以便进行表单验证。在`setup`函数中初始化了表单数据和表单验证规则，并定义了表单提交的方法。在表单提交时，我们先进行表单验证，通过后再获取表单数据并进行处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值