Element-ui中Table组件的用法

最新推荐文章于 2024-06-13 10:04:17 发布
最新推荐文章于 2024-06-13 10:04:17 发布
阅读量537 收藏
点赞数 1
分类专栏： 学习笔记 文章标签： ui vue 组件化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hx_programmer/article/details/120872469
版权

这里我们从基础用法一点点说

一,基础用法

 二,带斑马纹表格

三,带边框表格 

边框和斑马纹基本一样,在Table标签上加一个border属性就可以

四, 带状态表格

 这里row-class-name的值为一个函数

最低0.47元/天 解锁文章
hx_programmer
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementUI table组件 合计方法
晏金煜的博客
03-31 5090
合计方法过滤掉不需要显示的合计列 /** * 合计方法 * param 为elementUI table组件合计方法获取的参数param * arr 传入不需要显示合计的列表字段 */ export function getSummaries (param, arr = []) { const { columns, data } = param; const sums...
elementUI table组件
lbchenxy的博客
05-12 657
<template> <div class="w-data-table" v-loading="tableLoading"> <div class="dt-search" v-if="$slots.search"> <el-form ref="searchform" size="mini" class="dt-search-form-inline" :inline="true"
element-ui table组件如何使用render属性的实现
01-19
前言 起因： 在使用 element-ui table组件时，由于表列比较多一个个写特别麻烦，所以想通过将所有表头定义成一个数组，通过遍历多方式去实现。这样解决了手写很多 el-table-column 的情况。 障碍： 类似于下面自定义表列的样式，它是通过 slot-scope 去覆盖 el-table-column 内部slot的样式实现的。那我们在遍历表头数组的时候如何实现呢？ 参考： 用过 react 开发会经常用到 ant design ，其中它的 table 组件是可以接受 render属性的，下面使用table组件时，只需要定义好，columns(表头列) data(表的具体数
vue3+element-plus的el-table的一些操作【个人学习使用】
weixin_42342371的博客
12-09 2131
在vue3中，不在使用slot-scope的方式进行插槽的使用使用方式为 #titile = 'scope'进行使用正在上传…重新上传取消。
element plus之el-table行融合+列融合+小计行+自定义控件+样式自定义方案
visket2008的专栏
11-04 5985
旨在解决项目过程中遇到基于el-table实现项目需要的在线类似Excel的编辑统计展示能力，如何应对行列融合、样式修正、小计行添加等需求如何处理。项目web端使用的是vue3+element plus，下面代码介绍等相关内容均以vue3+ts语法描述。
为 element-plus的eltable或其他组件设置全局属性
m0_54991820的博客
08-04 1028
在main.ts修改；
element-plus 表格-方法、事件、属性的使用
缘如风的博客
09-02 2101
element-plus 表格-方法、事件、属性的使用
vue+elementui中使用table表格添加状态
路飞船长的博客
10-17 2642
vue+elementui中使用table表格添加状态根据状态方便筛选数据。
element-table 展示时根据数字展示不同状态，数字过多时处理方法
z_langjitianya的博客
05-08 525
之前处理 element-table 根据数字展示不同状态时，通常都使用三元表达式，因为一般不会有太多的状态；但是今天碰到一条数据需要处理七中状态，写三元表达式就有些过长，询问大佬后学会一种新处理方法。这个方法使用到 vue 的过滤方法，之前有学习过，但没有过多使用，此次加强回忆，并重新学习。
Element-ui之ElScrollBar组件滚动条的使用方法
12-01
在使用vue + element-ui 搭建后台管理页面的时候，做了一个头部、侧栏、面包屑固定的布局，导航栏和主要内容区域当内容超出时自动滚动。 使用的原因： 原来是采用优化浏览器样式的方式，对滚动条进行样式调整。但这...
vue+element-ui表格封装tag标签使用插槽
10-15
主要介绍了vue+element-ui表格封装tag标签使用插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
elsa:elsa（eleme simple admin）基于 element-ui 封装 el-form，el-table 等组件，用于快速开发后台管理页面
05-09
:high_voltage: elsa（eleme simple admin）基于 element-ui 封装 el-form，el-table 等组件，适用于快速开发后台管理项目。 用法示例，见： Quickstart npm i elsa-vue -S // vue main.js import Vue from 'vue' ...
基于Element封装一个表格组件tableList的使用方法
10-15
主要介绍了基于Element封装一个表格组件tableList的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue基于elementUI表格状态判断展示
热门推荐
boy火巨的博客
07-25 1万+
判断一条数据的状态展示相应的内容方法 如：status(状态(-1:待处理,0:关闭,1:已反馈,2:未解决,3:已解决)), 通过 v-if 判断显示对应的状态 代码： <div style="padding:15px 20px;"> <el-table size="mini" stripe :...
element-ui表格状态
uaena的博客
05-04 258
【代码】element-ui表格状态。
vue3+element-plus 1.动态表格编辑和2.静态表格编辑
weixin_71155604的博客
07-10 1575
【代码】vue3+element-plus 1.动态表格编辑 2.静态表格编辑。
ElementUI中el-table不同状态显示不同、显示颜色不同、图标不同
kobe_IT的博客
04-18 2934
ElementUI中el-table不同状态显示不同、显示颜色不同、图标不同
随记3-带状态表格
m0_48882383的博客
11-05 498
ElementUI 带状态表格 需求：状态不同，表格显示颜色不同 如图所示： 代码如下： <el-table :data="tableData" :border="true" :default-sort="{prop: 'createTime', order: 'descending'}" :row-class-name="tableRowClassName" class="table"> ...
若依Ruoyi-vue和element admin的区别，该如何选择。
最新发布
贝格前端工场的博客
06-13 256
提到中后台的前端框架，每个人都能列举出很多，这其中提及率比较高的就是Ruoyi和element admin两款，很多小伙伴分不清二者，本文为大家详细讲解一下。
element-ui中table多选组件选择父级子级也一起选择
09-24
在Element UI的Table多选组件中，选择父级和子级一起选择可以通过自定义的方式实现。 首先，我们需要在数据源中增加一个字段用于标识是否选中，例如使用"checked"字段，默认为false表示未选中。 然后，我们需要编写一个方法，在用户选择父级时，将其下所有子级都设置为选中状态。同样，在用户取消选择父级时，将其下所有子级都设置为未选中状态。可以通过递归的方式实现这个功能。 最后，我们需要在Table组件的多选列中，将checkbox的选中状态与数据源中的"checked"字段进行绑定，以实现联动效果。 具体代码如下： template： ``` <template> <el-table :data="tableData" style="width: 100%"> <el-table-column type="selection" :selectable="customSelectable"></el-table-column> <!-- 其他列 --> </el-table> </template> ``` script： ``` <script> export default { data() { return { tableData: [ { name: '父级1', children: [ { name: '子级1', checked: false }, { name: '子级2', checked: false }, ], checked: false }, { name: '父级2', children: [ { name: '子级3', checked: false }, { name: '子级4', checked: false }, ], checked: false } ] }; }, methods: { customSelectable(row, index) { return row.checked; }, handleSelectAll(selection) { selection.forEach(item => { if (item.children) { item.checked = true; this.setChildrenChecked(item.children, true); } }); }, handleSelectionChange(selection) { selection.forEach(item => { if (!item.children) { item.checked = selection.length > 0; } }); }, setChildrenChecked(children, checked) { children.forEach(child => { child.checked = checked; if (child.children) { this.setChildrenChecked(child.children, checked); } }); } } }; </script> ``` 以上代码演示了如何实现在Element UI的Table多选组件中选择父级和子级一起选择的功能。当用户选择父级时，其下的所有子级都会被选中；当用户取消选择父级时，其下的所有子级都会被取消选中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值