vue el-table把0和1改变为男和女

智鸿传播

于 2023-09-14 16:42:24 发布

阅读量443

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/leikunbo/article/details/132883754

版权

<el-table-column prop="studentSex" label="性别" :formatter="sex"></el-table-column>

然后就在vue的methods中写方法就可以了

methods: {
    sex(row,index){
        if(row.studentSex == 1){
            return '男';
        }else{
            return '女';
        }
    }
}

如果这个文章对您有用，或者您希望持续关注，也可以扫描下方微信订阅号二维码:
在这里插入图片描述

优惠劵

智鸿传播

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
vue el-table把0和1改变为男和女

然后就在vue的methods中写方法就可以了。
复制链接

扫一扫

vue-smooth-picker-Vue 2.x的平滑选择器组件，例如iOS本机日期时间选择器。-Vue.js开发

05-27

vue-smooth-picker:person_surfing_medium-light_skin_tone:Vue 2的SmoothPicker让我们更轻松地在触摸屏设备上选择一些数据，例如时间/城市/性别/座位数vue-smooth-picker:person_surfing_medium-light_skin_tone:Vue 2的SmoothPicker让我们更轻松地选择触摸屏设备上的一些数据，例如时间/城市/性别/座位号/产品/ ...看一下演示链接：产品| 日期时间| 性别演示代码链接：产品| 日期时间| 性别安装npm i -S vue-smooth-picker用法英语用法docs中文使用文档快速查看//导入并使用import'vue-smooth-picker / dist / css / style.css'从'vue-smooth-picker'导入SmoothPicker Vue.use（SmoothPicke

vue el-table前端 file-saver 导出excel可导出分页数据.zip

12-11

亲测 vue el-table前端使用file-saver组件，导出excel ,可导出分页数据，里面有详细步骤

1 条评论您还未登录，请先登录后发表或查看评论

基于vue和element-ui的表格组件，主推数据渲染，支持内容和方法灵活绑定，提供动态具名插槽自定义内容

kakashi_chen的博客

04-01

2453

基于vue和element-ui的表格组件，主推数据渲染，支持内容和方法灵活绑定，提供动态具名插槽自定义内容

vue3+ts+elem后台完成excel转换成数组

weixin_43887863的博客

12-29

210

例如：vue3+ts+elem后台完成excel转换成数组，项目场景：商品信息批量录入

Vue + TS 封装全局性别转换函数

三拾的博客

06-30

497

当我们需要在Vue项目中进行性别的转换时，我们可以封装一个全局性别转换函数，让其可以在项目的任何地方使用。通过以上方式，我们可以方便地在Vue项目中进行性别转换的操作，提高了代码的复用性和可维护性。在使用该函数时，我们只需要在Vue组件中导入该函数并调用即可。生命周期钩子中，我们也可以直接调用该函数来进行性别转换。函数，用于将数字或字符串类型的性别转换为中文表示。枚举，用于存储性别的中文表示。上述代码中，我们使用了Vue的过滤器功能来调用。上述代码中，我们定义了一个。我们可以在Vue项目的。

ElementUI中的el-form怎样格式化显示1和0为男和女

m0_57202083的博客

10-15

2446

<el-table-column prop="studentSex" label="学生性别" width="180" :formatter="sexf"> </el-table-column> methods方法中加入第一种方式： sexf: function( row, index) { if (row.studentSex == 1) { return "男"; ..

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 '女'; }...

关于实现 Vue 动态数据显示，比如数字 0 或 1 怎么显示为男或女等等的动态显示实现方法

Muxiu

09-07

1146

test.vue以上关于数据test.data是数字格式的动态数据显示，有两种实现方法可以实现，方法二的灵活性比较好（比较推荐）

vue element ui 后端接收0、1在前端table中转换为男、女

qq_52107354的博客

04-07

455

【代码】vue element ui 后端接收0、1在前端table中转换为男、女。

vue中将后台返回的0，1等代码转换成男，女等汉字。

qq_38210427的博客

04-23

369

vue中将后台返回的0，1等代码转换成男，女等汉字。

Vue elementUI中把数据库中的1,0转成男女

qq_44641517的博客

02-05

5002

一定要设置template 的slot-scope="scope" <el-table-column prop="gender" label="性别" show-overflow-tooltip > <template slot-scope="scope"> <sp..

vue el-table实现行内编辑功能

10-15

主要为大家详细介绍了vue el-table实现行内编辑功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

vue el-table实现自定义表头

10-15

主要为大家详细介绍了vue el-table实现自定义表头，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

10-17

主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue2.0移动端自定义性别选择提示框

li420520的博客

10-18

741

这篇文章主要是简单的实现了vue2.0移动端自定义性别选择的功能，很简单但是经常用到，于是写了一个小小的demo，记录下来。效果图：图片.png 实现代码： <t emplate> <div class="app"> <div class="boy"> <input type="radio"

elementUI中对table数据显示进行转换

高先生的猫

01-08

5410

在项目中需要用到数据转换，如：性别，0为男性，1为女性，存在数据库中的数据为0或1，那么我们需要使用 :formatter 来进行数据转换。列表界面以下附上代码： // 列表column <el-table-column label="性别" align="center" prop="cadreSex" :formatter="formatSex" /> JS代码： // 性别数据转换 formatSex(row){ return row.cad.

el-select 男女性别绑定

wwf1225的博客

03-16

1721

<el-form-itemlabel="性别"> <el-selectplaceholder=""v-model="form.sex"> <el-optionlabel="男":value="1"></el-option> <el-optionlabel="女":value="0"></el-option>...

element ui数据转换，比如后端返回的1代表男，2代表女，在表格中显示男女

最新发布

09-27

vue el-table 加 el-form 是Vue.js框架中常用的组件。el-table组件用于展示表格数据，el-form组件用于创建表单。通过将el-table和el-form结合使用，可以在表格中添加表单元素，实现更复杂的数据操作和交互功能。在使用el-table和el-form时，可以通过以下步骤来实现表格与表单的结合： 1. 在Vue组件中引入el-table和el-form组件，并在模板中使用它们。 2. 在el-table中使用el-table-column组件来定义表格的列，同时可以在列中添加el-form-item组件，用于展示和编辑表单元素。 3. 在el-form-item中使用el-input、el-select等组件来创建表单元素，可以通过v-model指令来实现数据的双向绑定。 4. 通过监听表单的提交事件，可以获取表单数据并进行相应的处理。示例代码如下所示： ```vue <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="年龄" prop="age"></el-table-column> <el-table-column label="性别" prop="gender"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-form-item> <el-button @click="edit(scope.row)">编辑</el-button> </el-form-item> </template> </el-table-column> </el-table> <el-dialog :visible.sync="dialogVisible"> <el-form :model="formData" ref="form" label-width="80px"> <el-form-item label="姓名"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="年龄"> <el-input v-model="formData.age"></el-input> </el-form-item> <el-form-item label="性别"> <el-select v-model="formData.gender"> <el-option label="男" value="男"></el-option> <el-option label="女" value="女"></el-option> </el-select> </el-form-item> </el-form> <div slot="footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="save">保存</el-button> </div> </el-dialog> </div> </template> <script> export default { data() { return { tableData: [{ name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }], dialogVisible: false, formData: {} }; }, methods: { edit(row) { this.formData = Object.assign({}, row); this.dialogVisible = true; }, save() { // 提交表单数据的逻辑处理 // ... this.dialogVisible = false; } } }; </script> ```

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交