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

最新推荐文章于 2024-03-12 09:49:26 发布
最新推荐文章于 2024-03-12 09:49:26 发布
阅读量1.3w 收藏 12
点赞数 7
分类专栏： vue学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feast_aw/article/details/80945371
版权
//数据转换
             formatRole: function( row, column) {
                 return row.ud_status == '1' ? "男" : row.ud_status == '2' ? "女" : "aaa";
            },

    在html部分绑定一下
    < el-table-column prop= "ud_status" label= "订单状态" :formatter="formatRole" align= "center">
     </ el-table-column>
Feast_aw
关注
  • 7
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
element-ui表格数据转换的示例代码
10-18
主要介绍了element-ui表格数据转换的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue使用Element-ui表单发送数据和多张图片到后端
lwj_0415的博客
03-28 6198
在做项目的时候遇到一个问题，前端需要上传表单到后端，表单数据包括文本内容和图片，后端我用的是Nodejs，效果类似下图 前端需要向后端传商品名称，价格，描述，商品图片 前端准备，利用Element-ui中的表单功能和上传功能，将upload代码嵌套在表单中，代码如下 <template> <div class="content"> <div class="form"> <el-form ref="form" :mode
Vue3实战 第十二章 表格组件里el-table-column 的 formatter属性应用
最新发布
Java 技术专栏，从入门到精通，熟悉企业级开发
03-12 4727
今天讲解表格组件里el-table-column 的 formatter属性应用，比如时间格式化、数据格式化、状态格式化等，解决我们急需的功能，也方便以后自己查找。
微信小程序性别代码对应描述
svygh123的专栏
10-10 3244
// 必须是在用户已经授权的情况下调用 wx.getUserInfo({ success: function(res) { var userInfo = res.userInfo var nickName = userInfo.nickName var avatarUrl = userInfo.avatarUrl var gender = userInfo.gender //性别 0：未知、1：男、2：女 var province = userInfo.prov.
vue element ui el-select多选与后端传值(多选，换成字符串数组的形式传值)
weixin_38897313的博客
10-11 5173
表单传值，换成字符串数组形式
vue elementUI实现双（多）列表格，内容均自定义
是日前端
02-07 7041
需求类似这样的： 使用普通table实现，样式需要自己设置： <table class="person-info" border="1" cellspacing="0"> <tbody> <tr> <th>档案编号</th> <td>{{ personInfo.name }}</td> <th>姓名</th> &
性别(0,1)转为(男,女)的方法总结
qlk_2007的专栏
09-03 4657
性别(0,1)转为(男,女)的方法总结,偶然在“kucool的专栏”看到这篇文章，感觉很实用。文中注明是转自“菩提树下的杨过”，可我在那没找到这篇文章的原作。只好给出引用“kucool的专栏”的地址了。方法1: Select  CASE sex  WHEN 1 THEN 男  WHEN 0 THEN 女  ELSE 不男不女？哈哈  END AS se
性别映射和性别转换
m0_47634108的博客
02-15 965
以vue为前端为例，当数据的性别男为1、女为2时，加入以下vue代码 customRender: function (text) { if (text === 1) { return '男' } else if (text === 2) { return '女' } else { return text
ElementUI中的el-form怎样格式化显示1和0为男和女
m0_57202083的博客
10-15 2425
<el-table-column prop="studentSex" label="学生性别" width="180" :formatter="sexf"> </el-table-column> methods方法中加入 第一种方式： sexf: function( row, index) { if (row.studentSex == 1) { return "男"; ..
vue el-table把0和1改变为男和女
leikunbo的博客
09-14 432
然后就在vue的methods中写方法就可以了。
elementUI中对table数据显示进行转换
高先生的猫
01-08 5347
在项目中需要用到数据转换，如：性别，0为男性，1为女性，存在数据库中的数据为0或1，那么我们需要使用 :formatter 来进行数据转换。 列表界面 以下附上代码： // 列表column <el-table-column label="性别" align="center" prop="cadreSex" :formatter="formatSex" /> JS代码： // 性别数据转换 formatSex(row){ return row.cad.
Vue+Element ui 根据后台返回数据设置动态表头操作
10-14
主要介绍了Vue+Element ui 根据后台返回数据设置动态表头操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui树形控件后台返回的数据+生成组织树的工具类
01-19
开发项目的时候遇到需要在表单中选择参会人员，根据不同部门下选择不同的人，在element-ui中有树形控件能满足这种情况，后台封装数据记录一下。  封装格式：  返回数据格式：  接收数据的pojo类： 2018年4月12...
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 ...
Vue封装Excel导入组件并使用ElementUI显示内容，将json结果集传递给后端
LauSET的博客
04-12 2760
Vue封装Excel公用导入组件，将内容显示在ElementUI表格中，将结果传递给后端进行数据库 操作前言一、演示1.选择文件2.查看内容二、使用步骤1.总结 前言 使用Vue读取Excel内的数据需要使用到xlsx组件，将结果提取出来然后动态渲染到ElementUI的Table中进行结果展示，再一步确定来把数据传递给SpringBoot后端加入到数据库中 一、演示 1.选择文件 点击导入按钮后，选择要导入的excel文件 2.查看内容 这里演示就把读取的Excel数据直接展示了，后面会介绍如何
vue+elementUI 前端 select选择框同时传两个值给后端
weixin_44289771的博客
01-12 4367
介绍： form表单中有一个select选择框，下拉框显示人员名称，选中之后显示在框里 要求： 今天后端小哥哥要求选中之后，form表单提交时，select选择框同时传递两个值，即选中的人员姓名以及人员id。 实现： <el-form-item label="居住情况：" prop="liveTypeName"> <el-select v-model="ruleForm.liveTypeName
基于vue-cli、elementUI的Vue超简单入门小例子
热门推荐
界之边缘的轮回
03-03 5万+
- 这个例子还是比较简单的，独立完成后，能大概知道vue是干嘛的，可以写个todoList的小例子。 - 开始写例子之前，先对环境的部署做点简单的介绍，其实和Vue官方的差不多。 #如若没有安装过vue-cli,先全局安装一下vue-cli $ cnpm i -g vue-cli #到自己喜欢的目录下创建一个基于 webpack 模板的新项目 $ vue init webpack my...
C++通讯录管理系统
ISP行业的忠实粉丝
05-12 249
C++通讯录管理系统 目录 C++通讯录管理系统 1、功能 2、代码演示 1、功能 cout << "*****************************" << endl; cout << "****** 1、添加通讯录 ******" << endl; cout << "****** 2、显示联系人 ******" << endl; cout << "****** 3、删除联系人
vue element ui 后端接收0、1在前端table中转换为男、女
qq_52107354的博客
04-07 433
【代码】vue element ui 后端接收0、1在前端table中转换为男、女。
element ui表格多选根据后端返回的数据回显多选
05-24
可以通过设置表格数据的 `selected` 属性来实现多选数据的回显。假设后端返回的数据中包含一个 `selectedIds` 数组，表示已选中的数据的 ID，可以先遍历表格数据，将每条数据的 `selected` 属性设置为 `selectedIds` 数组中是否包含该条数据的 ID，然后在表格上添加一个 `@selection-change` 事件监听器，当用户手动勾选或取消勾选表格中的数据时，将新的选中数据的 ID 存入 `selectedIds` 数组中。 以下是一个示例代码，假设表格数据包含 `id` 和 `name` 两个字段： ```html <template> <el-table :data="tableData" @selection-change="handleSelectionChange" :select-on-indeterminate="false" :default-sort="{prop: 'id', order: 'ascending'}" :row-key="row => row.id" v-loading="loading"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="id" label="ID" sortable></el-table-column> <el-table-column prop="name" label="Name" sortable></el-table-column> </el-table> </template> <script> export default { data() { return { loading: false, tableData: [] } }, methods: { async fetchData() { this.loading = true; const response = await fetch('/api/data'); const data = await response.json(); this.tableData = data.map(item => ({ ...item, selected: false })); const selectedIds = data.filter(item => item.selected).map(item => item.id); this.tableData.forEach(item => { item.selected = selectedIds.includes(item.id); }); this.loading = false; }, handleSelectionChange(selection) { const selectedIds = selection.map(item => item.id); this.tableData.forEach(item => { item.selected = selectedIds.includes(item.id); }); } }, mounted() { this.fetchData(); } } </script> ``` 在上面的示例代码中，`fetchData` 方法通过 AJAX 请求获取后端数据，并将每条数据的 `selected` 属性初始化为 `false`。然后遍历后端返回的数据，将已选中的数据的 `selected` 属性设置为 `true`。在表格上添加了一个 `selection-change` 事件监听器，当用户手动勾选或取消勾选表格中的数据时，将选中的数据的 ID 存入 `selectedIds` 数组中，并遍历表格数据，将新的选中数据的 ID 存入 `selectedIds` 数组中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值