element-ui动态生成表格。表头的名字不一样

最新推荐文章于 2024-05-23 19:16:52 发布
最新推荐文章于 2024-05-23 19:16:52 发布
阅读量1.8k 收藏 4
点赞数 1
分类专栏： element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33769914/article/details/106547680
版权
本文介绍了如何在Element-UI中动态生成表格，当表头数据不确定时，通过接口获取数据并利用Vue的v-for指令结合prop和label实现动态渲染表格列。关键步骤包括接收接口数据，提取表头参数名，再将这些参数名用于循环创建el-table-column组件。
摘要由CSDN通过智能技术生成

官网的是这样的。接口数据是已知的：日期，姓名，地址

所以可以直接写label。prop的写死

 

如果表头数据是动态的不一定的。

我们应该怎么写呢？下面是接口给的表格的数据

可以观察看出来我们如果使用循环。就是循环el-table-column

<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>  在这个里面写循环。并且prop和label都变成动态的。那么我们就得知道表头参数名
    </el-table&g

最低0.47元/天 解锁文章
肖肖肖丽珠
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何实现ElementUI动态表头？
刘杨造梦的博客
06-18 849
估计没有其他人需要用这个扩展的，就注释了，不用的可以删掉！确 定自定义指标注意：由于我们项目使用的是vue2，故本教程所展示的代码是vue2写法，如使用的是vue3，请自行修改扩展。// return item.replace("倍数", "");
组件-Element---Table（表格）
GU_AO_SHI_TAI_DU的博客
07-01 802
组件-Element—Data 一、组件—表格 基础表格 <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="...
48 element UI修改表头名称 双击cell修改内容 table拖拽 上下加减数字框
samllucky的博客
05-26 863
<template> <div class="app-container"> <el-table border :data="tableData" style="width: 100%;align: center" max-height="550" :cell-class-name="tableCellClassName" @cell-click="tsetClick" @hea..
84.elementUI表格动态更改列名
银河与猫的博客
05-13 678
前言： 因为项目要求，需要根据接口返回的type判断，动态更改表格第一列的列名以及对应的值，刚开始自己通过v-if判断type的值，来展示对应字段的值，但是不知道为什么会出现接口返回值了，但页面没有展示出来，所以再三研究加百度，找到解决办法了！ 不想打字了，直接截图吧： 希望自己长记性，下次不要再不会了！！！ ...
Element 踩坑--value和label赋值不一致，分别为id,name，传入id时，不会显示该id对应的值
weixin_38779534的博客
11-15 1266
需求是这样的，我要在添加产品成功之后，带着产品类别的catId跳转到产品页面以查询此类别下的产品，这不是很简单吗，不是传进来就行了吗，OK，我们来look一look <template> <el-select @change="cateOneChange" v-model="catId" :placeholder="defaultClassOneName" size="...
element-plus中el-table表头名称+图标
m0_59642018的博客
09-12 1196
el-table-column prop="date" label="物料序号">-- 表头名称和图标 -->-- 内容值 -->
vue+element-ui动态生成多级表头的方法
10-18
标题中的“vue+element-ui动态生成多级表头的方法”是指在Vue.js应用程序中使用Element-UI库来创建一个能够根据数据动态展示多级表头的表格组件。Element-UI是一个流行的前端UI框架，它提供了丰富的组件库，适用于...
element-ui动态渲染表格.html
04-01
element-ui动态渲染表格
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
12-09
// 表格数据 tableColumns: [], // 表头数据 titleData:[], } } 引入并注册子组件 import TableComponents from "../../components/table/table"; //注册子组件table components: { tableC: TableComponents ...
element-ui.rar element-ui核心库压缩包
12-20
这个“element-ui.rar”压缩包包含了 Element UI 的核心库，是开发人员快速搭建企业级 Web 应用的重要工具。 Element UI 的设计理念是简洁、易用，它的组件设计遵循 Material Design 规范，同时考虑到国内用户的...
Element ui 丨修改el-table 表头的背景色、字号及文字颜色
最新发布
weixin_39142106的博客
05-23 4789
Element ui 丨修改el-table 表头的背景色、字号及文字颜色
vue + element ui工程，Tree 树形控件展示指定值，比如name
qq_43314764的博客
03-09 1087
1.element ui的Tree 树形控件数据官方例子中展示label。 2.本文实现目的：采用数据中的name作为展示项。 数据效果图： 数据： data() { const data = [ { id: 1, name: '一级 1', iconType: 'group', ch
Element组件-Table 表格
bili181的博客
08-03 4618
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
Element UI动态生成多级表头
qq_42794545的博客
11-16 5864
层数是可变化的，所以需要专门设置一个表格的数据来保存表头，然后通过v-for="item in tableColData"的方式来循环展示表头，由于层数是循环展示表头的，所以如果层数里面如果有第二级别的表头，就需要在表头数据多设置一级children，加上第二层v-for="item1 in item.children"来遍历二级表头。由于项目的需求，需要根据用户自定义的方式来初始化表格的表头包含哪些信息，有很多信息是有规律的，所以我们需要Element UI动态生成多级表头。
ElementUI中el-table根据后端接口传递过来的数字状态、显示不同文字、不同颜色
lyq1948的博客
06-21 1828
{{ binss(status) }}
elementui表格自定义表头的两种方法
weixin_70245286的博客
09-04 3910
这篇文章总结了elementui组件自定义表头的方法，因为自己在开发中遇到了坑，就总结一下
element-table动态生成表格，动态设置字体颜色
qq_39377906的博客
10-27 935
element-table动态生成表格，动态设置字体颜色，vue3+ts+element-plus
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-29 5407
<template> <!-- 表格---------------------------------------- --> <div class="table"> <el-table :data="tableBodyData" stripe :height="paginationHide ? 550 : 480"> <el-table-column v-for="(a, $i) in tableHead...
elementUI table 表格 自定义表头内容（加列名解释）
热门推荐
小肉包的博客
07-26 1万+
element UI table 表格 自定义表头内容（加列名解释） 使用element UI的 table 组件创建的表格，需要给每一个列名加上字段解释，鼠标悬停的时候，显示出解释的文字，鼠标移出的时候文字隐藏，页面效果如图： 方法一： element UI官方提供了自定义表头的方法（我没有使用它提供的方法，等有空再来试一下该方法） 参考element UI官方文档 自定义表头内容 方法二： `` ...
element-ui动态生成的form表单不显示错误信息
09-04
element-ui动态生成的form表单不显示错误信息可能有以下原因： 1. 验证规则未配置正确：在使用element-ui的动态form表单时，需要为每个表单项配置相应的验证规则，包括必填规则、长度规则、正则表达式等。如果验证规则没有正确配置，系统就无法判断输入是否符合要求，从而无法显示错误信息。 2. 错误信息未绑定到表单项：在element-ui中，一般通过v-model和prop属性绑定表单项的值和字段名。同时，在验证时，也需要将错误信息绑定到表单项对应的字段，通过设置error属性来控制错误信息的显示。如果错误信息没有正确绑定到表单项，就无法显示错误信息。 3. 错误信息样式未设置：element-ui默认提供了一些错误信息显示的样式，可以通过设置el-form-item的error属性来显示错误样式。如果没有设置错误信息的样式，错误信息就无法显示。 4. 错误信息未触发验证：在element-ui中，通过触发验证事件来显示错误信息。例如，可以设置表单项的blur事件或者在提交表单时通过手动触发验证来显示错误信息。如果错误信息没有触发验证，就无法显示。 综上所述，要解决element-ui动态生成的form表单不显示错误信息的问题，需要确保验证规则配置正确，错误信息正确绑定到表单项，设置了错误信息的样式，并且触发了验证事件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值