el-table 动态渲染后台数据及根据状态码决定按钮文字显示

最新推荐文章于 2024-04-03 14:50:38 发布
原创 最新推荐文章于 2024-04-03 14:50:38 发布 · 1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何在Vue项目中使用el-table组件动态渲染后台数据，并通过应用过滤器根据状态码来决定按钮上显示的文字。详细内容包括vue过滤器的实现方式，以及对应的html和js代码示例。

需求：

在这里插入图片描述

方法：vue 过滤器

html代码

 <el-table-column
                prop="settleAccountsStatus"
                :formatter="formatRole"
                label="状态"
                width="120"
              >
              </el-table-column>
              <el-table-column fixed=<
最低0.47元/天 解锁文章
Vue3.2 + Element-Plus 二次封装 el-table（Pro版）
斌擎科技
11-17 2348
ProTable 组件目前已是2.0版本🌈，在1.0版本中大家提出的问题与功能优化，目前已经得到优化和解决。😀 欢迎大家在使用过程中发现任何问题或更好的想法，都可以在下方评论区留言，或者我的开源项目 issues 中提出。如果你觉得还不错，请帮我点个小小的Star🧡🤔前提：首先我们在封装 ProTable 组件的时候，在不影响 el-table 原有的属性、事件、方法的前提下，然后在其基础上做二次封装，否则做得再好，也不太完美。🧐。
el-table实现指定列作动态列表渲染
weixin_44988028的博客
08-30 793
重要代码: myList是动态列的表头名称, readList是需要遍历的动态内容 exportForm：{ exportData：{ [ fix_first:"", fix_second:"", readList:{ [name:'动态列1'，value:''], [name:'动态列2',value:''] } ] } } myList:{ [name:'动态列1'], [name:'动态列2'] } <el-table-column v-for
el-table动态表头数据渲染
maohangfei.cn
06-05 1150
el-table实现动态表头渲染
el-table 表格内如何根据变量禁用或条件渲染按钮
我家有只小金毛的博客
04-24 3545
el-table 表格内如何根据变量禁用或条件渲染按钮导入应用场景Let's go1、全部渲染但动态禁用按钮2、条件渲染按钮结尾 导入 在使用elementUI组件时，打交道最多的就是table 和form，一个呈现后端数据，一个与用户交互，增加或修改数据。 table 中几乎必备一个操作列，其中一般有编辑按钮和 删除按钮，但是有时候我们会希望根据变量值来条件渲染按钮。啥意思？ 应用场景 假设一个消息表格中呈现了用户[a, b, c, d]四个人相互之间发布的n条消息，现在用户a登录了系统，他有这个消息菜
el table 列表头变成按钮 弹窗
懒虫的博客
06-06 767
el table 列表头变成按钮 弹窗。
封装element中的table表格，实现可控并动态渲染（动态表头）
yw00yw的博客
01-23 7224
在使用vue+element做管理系统的时候，使用到了element中的表格，但是element的表格只需要传递进去数据，然后写死表头即可渲染。 但是在追求组件化开发的vue项目中，特别是有很多表格的管理系统的时候，如果写死表头，并且每个组件中写自己的表格，不仅浪费时间而且消耗性能。 真的需求是在需要table的组件中引入同一个table即可，而table通过父组件传递数据来动态渲染。上一节实现...
基于Element UI的el-table多级表头封装方案
其次是**枚举值显示转换**，实际业务中常遇到后端返回数字类型的状态码（如status: 1表示“启用”），通过配置映射规则，可在表格中自动将其转换为更具可读性的文本，提升用户体验。第三是**时间格式化**功能，利用...
<template> <el-container style="height: 100vh"> <el-aside width="200px"> <el-menu default-active="1" class="el-menu-vertical-demo"> <el-menu-item index="1">员工管理</el-menu-item> </el-menu> </el-aside> <el-container> <el-header> <h2>员工管理系统</h2> </el-header> <el-main> <!-- 查询条件 --> <el-row :gutter="20" style="margin-bottom: 20px;"> <el-col :span="4"> <el-input v-model="queryParams.name" placeholder="请输入姓名" /> </el-col> <el-col :span="4"> <el-select v-model="queryParams.gender" placeholder="请选择性别"> <el-option label="男" :value="0"></el-option> <el-option label="女" :value="1"></el-option> </el-select> </el-col> <el-col :span="4"> <el-select v-model="queryParams.job" placeholder="请选择职位"> <el-option label="班主任" :value="1"></el-option> <el-option label="讲师" :value="2"></el-option> <el-option label="学工主管" :value="3"></el-option> <el-option label="教研主管" :value="4"></el-option> <el-option label="咨询师" :value="5"></el-option> </el-select> </el-col> <el-col :span="6"> <el-date-picker v-model="queryParams.dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" /> </el-col> <el-col :span="4"> <el-button type="primary" @click="fetchData">搜索</el-button> <el-button type="success" @click="showAddDialog">新增</el-button> <el-button type="danger" @click="batchDelete">批量删除</el-button> </el-col> </el-row> <!-- 数据表格 --> <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" /> <el-table-column prop="id" label="ID" width="80" /> <el-table-column prop="name" label="姓名" /> <el-table-column prop="gender" label="性别" width="80"> <template #default="scope"> {{ scope.row.gender === 0 ? '男' : '女' }} </template> </el-table-column> <el-table-column prop="job" label="职位" width="120"> <template #default="scope"> {{ jobMap[scope.row.job] || '未知' }} </template> </el-table-column> <el-table-column prop="entrydate" label="入职时间" width="120" /> <el-table-column label="头像" width="100"> <template #default="scope"> <el-image v-if="scope.row.image" :src="scope.row.image" style="width: 50px; height: 50px; border-radius: 50%;" :preview-src-list="[scope.row.image]" /> <span v-else>暂无图片</span> </template> </el-table-column> <el-table-column prop="createTime" label="创建时间" width="150" /> <el-table-column label="操作" width="200"> <template #default="scope"> <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button> <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> <!-- 分页组件 --> <el-pagination layout="prev, pager, next" :total="total" :page-size="queryParams.pageSize" v-model:current-page="queryParams.pageNum" @current-change="fetchData" /> </el-main> </el-container> </el-container> <!-- 新增/编辑对话框 --> <el-dialog v-model="dialogVisible" :title="dialogTitle"> <el-form :model="form" label-width="100px"> <el-form-item label="姓名"> <el-input v-model="form.name" /> </el-form-item> <el-form-item label="用户名"> <el-input v-model="form.username" /> </el-form-item> <el-form-item label="密码"> <el-input v-model="form.password" show-password /> </el-form-item> <el-form-item label="性别"> <el-select v-model="form.gender" placeholder="请选择性别"> <el-option label="男" :value="0"></el-option> <el-option label="女" :value="1"></el-option> </el-select> </el-form-item> <el-form-item label="职位"> <el-select v-model="form.job" placeholder="请选择职位"> <el-option label="班主任" :value="1"></el-option> <el-option label="讲师" :value="2"></el-option> <el-option label="学工主管" :value="3"></el-option> <el-option label="教研主管" :value="4"></el-option> <el-option label="咨询师" :value="5"></el-option> </el-select> </el-form-item> <el-form-item label="头像链接"> <el-input v-model="form.image" /> </el-form-item> <el-form-item label="入职时间"> <el-date-picker v-model="form.entrydate" type="date" placeholder="选择日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" /> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="dialogVisible = false">取消</el-button> </el-form-item> </el-form> </el-dialog> </template> <script setup> import { ref, onMounted } from 'vue'; import axios from 'axios'; // 设置 axios 实例 const apiClient = axios.create({ baseURL: 'http://localhost:8080/emps', timeout: 5000, }); // 表格数据 const tableData = ref([]); const total = ref(0); const selectedRows = ref([]); // 查询参数 const queryParams = ref({ pageNum: 1, pageSize: 5, name: '', gender: null, job: null, dateRange: [] }); // 表单数据 const form = ref({ id: null, username: '', password: '', name: '', gender: null, job: null, image: '', entrydate: '' }); // 对话框控制 const dialogVisible = ref(false); const dialogTitle = ref('新增员工'); const isEdit = ref(false); // 职位映射表 const jobMap = { 1: '班主任', 2: '讲师', 3: '学工主管', 4: '教研主管', 5: '咨询师' }; // 获取数据 const fetchData = async () => { const params = { page: queryParams.value.pageNum, pageSize: queryParams.value.pageSize, name: queryParams.value.name, gender: queryParams.value.gender, job: queryParams.value.job, begin: queryParams.value.dateRange[0] || '', end: queryParams.value.dateRange[1] || '' }; try { const res = await apiClient.get('', { params }); if (res.data.code === 1) { tableData.value = res.data.data.rows; total.value = res.data.data.total; } else { alert('获取数据失败：' + res.data.msg); } } catch (error) { console.error('请求出错：', error); alert('网络请求失败，请检查后端是否运行正常'); } }; // 显示新增对话框 const showAddDialog = () => { dialogTitle.value = '新增员工'; isEdit.value = false; form.value = { id: null, username: '', password: '', name: '', gender: null, job: null, image: '', entrydate: '' }; dialogVisible.value = true; }; // 显示编辑对话框 const handleEdit = (row) => { dialogTitle.value = '编辑员工'; isEdit.value = true; form.value = { ...row }; dialogVisible.value = true; }; // 提交表单 const submitForm = async () => { try { if (isEdit.value) { await apiClient.put('', form.value); } else { await apiClient.post('', form.value); } dialogVisible.value = false; fetchData(); } catch (error) { console.error('保存失败:', error); alert('操作失败，请查看控制台日志'); } }; // 删除员工 const handleDelete = async (id) => { if (!confirm(`确认删除ID为 ${id} 的员工吗？`)) return; try { await apiClient.delete(`/${[id]}`); fetchData(); } catch (error) { console.error('删除失败:', error); alert('删除失败，请查看控制台日志'); } }; // 批量删除 const batchDelete = () => { if (selectedRows.value.length === 0) { alert('请至少选择一条记录'); return; } const ids = selectedRows.value.map(item => item.id); if (!confirm(`确认删除选中的 ${ids.length} 条员工吗？`)) return; try { apiClient.delete(`/${ids}`); fetchData(); } catch (error) { console.error('批量删除失败:', error); alert('删除失败，请查看控制台日志'); } }; // 表格选择监听 const handleSelectionChange = (rows) => { selectedRows.value = rows; }; // 初始化加载数据 onMounted(() => { fetchData(); }); </script> <style scoped> .el-header { background-color: #f5f7fa; display: flex; align-items: center; } </style> 帮我优化一下代码，使代码更简洁，美化一下页面，把头像列放到名字列后面
最新发布
07-15
<el-table-column prop="createTime" label="创建时间" width="180" align="center" /> <el-table-column label="操作" width="180" align="center" fixed="right"> <el-button size="small" type="primary...
Vue中el-table表格内容格式化的三种实现方法
在Vue开发中，表格数据的展示是前端开发中的常见需求，尤其是在企业级管理系统、后台管理平台等场景中，el-table作为Element UI框架的核心组件之一，被广泛用于数据列表的渲染与交互。本文围绕“Vue表格格式化方法”...
ElementUI表格的动态渲染
妹纸也可以
03-17 3293
场景 表头不固定，根据后端返回的对象数组取key值为表头，value为行值。 实现 tableLookData为渲染数据，tableLookHeader为表头。 <el-table :data="tableLookData" border class="lookDataTable" ref="lookDataTable" @row-dblclick="dblclick" style="width: 100%; height: 100%"
vue获取后端数据并渲染
m0_58900588的博客
02-01 2317
Axios是一个流行的JavaScript库，用于在浏览器和node.js中发起HTTP请求。在utiles文件夹里配置。
05 在Vue3中如何动态渲染数据
源滚滚编程
12-17 1202
实际上动态渲染数据，在《使用CDN开发Vue3项目》中就已经学习过了，核心代码如下：
vue关于从后台获取的数据显示问题
E.N.Edward
01-09 2648
由于后台给的数据是代码比如（男是M女是F这种） 尽量使用过滤器 不要获取的时候直接修改里面的数据 element可以使用 :formatter 或者使用filters 过滤 保证用到获取的数据的时候直接可以给后台返回原数据 不然会涉及到深拷贝浅拷贝问题 会改变里面的数据 ...
Vue 学习随笔系列十二 -- 表格内容渲染方法
mm_0123456789的博客
04-03 2025
示例代码1 示例代码2 2、 使用 render 函数 3、使用 template 自定义 4、使用 slot 插槽 5、注意 使用template 自定义时，columns中的序号列显示不出来，需要在代码中重新编写， 例：
前端面试必问（后台管理系统的权限控制与管理）
热门推荐
我是小奶音啊的博客
09-05 3万+
此文章根据视频教程进行整理前端面试官必问系列-后台系统的权限控制与管理，建议搭配视频教程一起食用效果更佳 在Web 系统中，权限很久以来一直都只是后端程序所控制的． 为什么呢？ 因为Web 系统的不质围绕的是数据， 而和数据库最紧密接触的是后端程序． 所以在很长的一段时间内， 权限一直都只是后端程序要考虑的话题． 但是随看前后 端分离架构的流行， 越来越多的项目也在前端进权限控制 一、 权限相关概念 1.1 权限的分类 后端权限 从根不上讲前端仅仅只是视图层的展示， 权限的核心是在于服务器中的数据变，所以
Vue -- 通过 template 控制表格某一列根据状态不同显示的文字不同
暖一杯茶的博客
08-17 2185
<el-table-column label="状态"> <template slot-scope="scope"> <span v-if="scope.row.status == 'init' ">已预约</span> <span v-if="scope.row.status == 'arrival' ">已预约</span> <span v-if="s
el-table动态渲染列、可编辑单元格、虚拟无缝滚动
ngd-b的博客
05-01 1万+
针对日常开发的组件二次封装、方案设计实现。包括对el-table的动态渲染、单元格编辑；对于无缝滚动的实现，优化大数据量下的页面卡顿问题。 1. el-table实现动态渲染列 常规使用el-table <template> <el-table ref="multipleTable" :data="data" > <el-table-column prop="family_name" label="姓名" align="center">
el-teable表格动态列数渲染及详解
我是段段的博客
08-11 1万+
在项目中编写数据大屏的时候，除了柱状图、折线图、散点图…，还有，首先想到的是的表格，但是在后续的实现过程中，后端范围的列数是动态的，刚开始没有考虑到，然后采用了第一种方式，但是数据处理方式不太好，后来在Element官网查看了文档，就使用方式进行实现（第二种方式），不过两种方式都需要对数据进行处理第一种方式主要使用循环实现，页面逻辑比较简单，具体布局如下： 中数据如下： 使用来处理数据，将数据处理成渲染需要的格式，如下： 因为列数不固定，需要每一列的宽度也需要动态的计算，通过来实现，具体如下： 实现效果图如
elementUI字段显示过滤器的使用
honer123的博客
02-22 425
elementUI字段显示过滤器的使用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值