基于Element中table实现多行复选并自定义标题

最新推荐文章于 2024-05-09 17:02:16 发布
最新推荐文章于 2024-05-09 17:02:16 发布
阅读量1k 收藏 1
点赞数
分类专栏： js 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30596783/article/details/120988382
版权

如上图后三列同时需要修改表格标题，之前的type=“selection"无法满足当前需求，查了一下官方文档，提供了一个render-header函数，直接用jsx语法就好。

<template>
    <div>
        <el-table :data="tableData" border stripe>
            <el-table-column
              prop="name"
              label="字段"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="type"
              label="类型"
              align="center"
            ></el-table-column>
            <el-table-column :render-header="renderColumnHeader1">
              <template slot
了解本专栏 订阅专栏 解锁全文 超级会员免费看
代码研究员
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
vue+element 设置table表格表头，实现用Checkbox控制表格某列显示或者隐藏
qq_39918566的博客
11-26 4140
一、需求说明 由于表格列表字段过多，网页宽度不足以一眼看到我所关注的重要的信息。故需要隐藏掉不想看到的某几列。 二、实现的效果 三、实现思路 3.1.在需要隐藏的表头使用v-if来控制是否显示； 3.2.在名称列插入Popover弹出框，弹出框里面再使用checkbox来通过勾选控制. 相关代码如下： 3.3 HTML表格相关部分 <el-table ref="filterTable" :data="resultsData" stripe border style="width: 100%">
elemnt-ui table组件的标题可选方案
weixin_33946020的博客
11-26 248
前几天在使用element-ui组件的时候有一个需求比较特别，就是table组件使用时列数太多，显示的时候需要左右拉动才能显示全，那就只有一个方法可以解决此问题，那就是将table的列可选；but官网木有此项，如何办？活人还能被尿憋死吗，在官方基础上自己造。 将官方的例子改造，每列选项属性组成集合循环，而不是一一设置，demo顶千言。直...
element table表格同时实现标题搜索和列显示隐藏
最新发布
luoerdaixin的博客
05-09 1028
/ console.log(‘回调’, data,‘在这搜索筛选一下列表’) //{type: “projName”, value: “21”, tableType: “”}checkedColumns: [‘年’, ‘月’, ‘编码’,‘名称’,‘项目名称’,‘扣分类别’,‘分数’,‘扣分原因’,‘描述’],checkBoxGroup: [‘年’, ‘月’, ‘编码’,‘名称’,‘项目名称’,‘扣分类别’,‘分数’,‘扣分原因’,‘描述’],记得watch解决问题。// 组件 prop。
element开发-Table表格多选表头添加文字
转身
07-02 3558
要实现在table多选框checkbox后添加文字，效果如下： <el-table-column type="selection"></el-table-column> /deep/ .el-table__header-wrapper .el-checkbox__input::after { content: '全选'; position: absolute; margin-left: 5px; } ...
element-ui selection 选择列 自定义表头；
qq_41725253的博客
05-11 936
如图：需求是把选择列表头的全选去掉改为文字。content: '自定义文字';
ElementUI中el-table-column的type为selection时选择框旁边有个点
BADAO_LIUMANG_QIZHI的博客
08-23 4885
场景 使用el-table的多选框时，el-table-column的type为selection时，显示为勾选框。 但是会在勾选框旁边显示一个实心的小点。 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 这是因为在设置el-table-column的宽度为30后太窄的原因。 <el-table-column type="selection" widt..
网站4
02-18
各种输入元素如（文本框、复选框、单选按钮等）、（多行文本输入）、（下拉列表）和（按钮）用于构建交互式功能。 8. **响应式设计**：借助视口标签和媒体查询（@media），HTML5允许网页根据设备屏幕尺寸调整布局，...
shipengfish.github.io:博客
03-29
`<textarea>`定义多行文本输入，`<select>`和`<option>`创建下拉列表，`<button>`定义按钮。 5. 链接（Links）： `<a>`标签创建链接，`href`属性指定链接地址。`<base>`标签为所有链接设定基础URL，`<link>`引入...
Group-10
03-27
常见的表单元素包括`<form>`、`<input>`（多种类型如文本、密码、复选框、单选按钮等）、`<textarea>`（多行文本输入）、`<select>`（下拉列表）、`<option>`（选项）、`<button>`（按钮）以及`<label>`（标签关联）...
city.github.io
03-28
6. **表单元素**：`<form>`元素用于创建用户输入的表单，常见的表单控件有`<input>`（多种类型如文本、密码、复选框、单选按钮等）、`<textarea>`（多行文本输入）、`<select>`（下拉菜单）和`<button>`。...
html-intermediario
02-21
2. **表单**：`<form>`元素用于创建用户交互的表单，`<input>`用于各种输入类型，如文本、密码、复选框、单选按钮等。`<select>`，`<option>`用于下拉菜单，`<textarea>`则用于多行文本输入。`<label>`关联输入元素...
ElementUI2.0组件库el-table自定义表头下拉选择 表头筛选
进击的程序猿
03-10 7791
<template> <el-popover placement="bottom" width="180" trigger="click"> <el-select v-model="value" placeholder="请选择" clearable @change="changeHandler" ...
el-table自定义表头,el-table 加多选列
ingenuou_的博客
03-20 1100
element el-table 加多选列。
elementUI el-table中的selection实现单选+全选框换成文字
如影随风
12-27 7512
1、首先我们把全选框换成自己想要的文字：这里有使用header-cell-class-name属性给表头添加自定义class， <el-table height="100%" ref="tables" v-loading="dataLoading" :data="dataList" @select="handleRow" :header-cell-...
element-plus中el-table表头名称+图标
m0_59642018的博客
09-12 1114
el-table-column prop="date" label="物料序号">-- 表头名称和图标 -->-- 内容值 -->
element表格 自定义表头 两列多选
Yangpengxunb的博客
06-13 282
一行只能选一个checkbox。
vue el-table 自定义表头 el-select使用
u013750989的专栏
09-28 5287
el-table有一个自定义属性render-header           &lt; el-table-column v-for="(headItem,index ) intableHeadBill" :key=index"         align="center"         :prop="headItem.value"         :label="" :render...
【表格动态列】Vue + ElementUI实现表格多行表头以及表格动态列的功能
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
03-03 2632
这周工作中，遇见了一个表格动态列的需求，这记录一下如何使用Vue和ElementUI实现表格多行表头以及表格动态列的功能。
Vue使用mixin混入搭配element-UI的分页el-pagination简化代码
QiShiXieTa的博客
07-23 610
vue 混入 mixin 搭配 element-ui 分页 el-pagination基本使用 。 Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。一个mixin对象可以包含任意组件选项。当组件使用mixin对象时，所有mixin对象的选项将被“混合”进入该组件本身的选项。就是让不同的组件共用数据与方法这里使用的是vue-element-admin-master模板。...
在vue和element-ui的table中实现分页复选功能
09-02
在Vue和Element UI的Table组件中实现分页复选功能，可以按照以下步骤进行操作： 1. 在Vue组件中引入Element UI的Table和Checkbox组件： ```javascript import { Table, Checkbox } from 'element-ui'; ``` 2. 在data中定义需要用到的变量： ```javascript data() { return { // 表格数据 tableData: [], // 选中的行数据 selectedRows: [], // 是否全选 isAllSelected: false } } ``` 3. 在模板中使用Table和Checkbox组件，并设置相应属性和事件： ```html <template> <div> <el-table :data="tableData" @row-click="handleRowClick"> <el-table-column type="selection" width="55"> <template slot-scope="scope"> <el-checkbox v-model="selectedRows" :label="scope.row" @change="handleCheckboxChange"></el-checkbox> </template> </el-table-column> <!-- 其他列定义--> </el-table> </div> </template> ``` 4. 在methods中定义事件处理函数： ```javascript methods: { // 单击行选中/取消选中 handleRowClick(row) { const index = this.selectedRows.indexOf(row); if (index > -1) { this.selectedRows.splice(index, 1); } else { this.selectedRows.push(row); } }, // 全选/取消全选 handleCheckboxChange(value) { if (value.length === this.tableData.length) { this.isAllSelected = true; } else { this.isAllSelected = false; } } } ``` 5. 在模板中使用全选Checkbox，并绑定isAllSelected属性： ```html <el-checkbox v-model="isAllSelected" @change="handleSelectAllChange">全选</el-checkbox> ``` 6. 在methods中定义全选Checkbox的 change 事件： ```javascript methods: { // 全选/取消全选 handleSelectAllChange(value) { if (value) { this.selectedRows = [...this.tableData]; } else { this.selectedRows = []; } } } ``` 以上就是在Vue和Element UI的Table中实现分页复选功能的步骤。通过监听行点击事件，可以实现点击行选中/取消选中的功能；通过绑定Checkbox的v-model和change事件，可以实现全选功能；通过管理选中的行数据，可以获取用户选择的数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码研究员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值