table表格某一行进行置灰操作

最新推荐文章于 2023-11-09 16:24:25 发布
最新推荐文章于 2023-11-09 16:24:25 发布
阅读量4.7k 收藏 8
点赞数 3
文章标签： css html5 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Devil678/article/details/109638819
版权

el-table表头

表头加入这行
在这里插入图片描述

methods中的方法：定义class类名 row里的条件进行判断是否这样
在这里插入图片描述
css的样式设置： 需要深度
在这里插入图片描述

丶凡人
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
iview框架table组件中设置允许多选情况下某行选框置灰不让选择
ljxbbss的博客
10-18 4149
官方文档：table组件多选情况设置某行不让选 参考： 通过给columns数据设置一项，指定type: 'selection'，即可自动开启多选功能。 给 data 项设置特殊 key_checked: true可以默认选中当前项。 给 data 项设置特殊 key_disabled: true可以禁止选择当前项。 正确使用好以下事件，可以达到需...
vue用ant design中table表格,点击某行时触发的事件操作
01-18
使用customRow 设置行属性，写对应事件 :customRow=”rowClick” 然后在data里面写 rowClick: record => ({ // 事件 on: { click: () => { // 点击改行时要做的事情 // ...... console.log(record, 'record...
element table 每行点击已读置灰
MR.杜的博客
03-31 740
【代码】element table 每行点击已读置灰。
wxpython列表控件listctrl设置某行颜色_layui table设置某一行的字体颜色方法
weixin_39902598的博客
12-08 265
table自带的可以设置某一个单元格颜色，必须根据内容来修改，对于很多列同时修改并不方便，直接使用js操作比较简单。首先自定义一个div，内部存放table，根据class找到table，然后找到行tr，修改其样式中的颜色。//设置layui datatable的某一行的颜色//TabDivId:tab父div id;RowIndex:行序列号，从0开始；ColorString：颜色字符串，如'#...
a-table表格里的删除置灰
温小鹿的博客
06-18 389
a-table表格里的删除置灰
layui 行变灰_layui table指定某一行样式
weixin_28858229的博客
01-27 486
table.render({elem: "#test",// id: "table_cell_data",url: "http://localhost:3000/all",toolbar: "#toolbarDemo", //指向自定义工具栏模板选择器defaultToolbar: [], //除去打印，导出title: "用户数据表",cols: [[ ]],page: false,done: ...
antd design table更改某行数据的样式操作
01-18
antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string–>返回类型是String类型。 例子： import styless from ‘./component/record.css’;—>引入css样式。 css: .csbsTypes{ font...
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
10-15
主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
jQuery获取table下某一行某一列的值实现代码
10-20
主要介绍了jQuery获取table下某一行某一列的值实现代码的相关资料,需要的朋友可以参考下
layui table设置某一行的字体颜色方法
10-16
今天小编就为大家分享一篇layui table设置某一行的字体颜色方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui 表格单选及表格多选，设置某些选项置灰禁止选择
前端打工人的博客
07-21 1万+
element-ui 表格单选、多选功能，设置某些选项置灰禁止选择，methods方法tableRowClassName定义class类名，row是当前行的数据，设置判断条件...
element-ui根据一列的某个标签值将超链接置灰。
qq_40950903的博客
06-03 530
根据后端返回数据列表的每一行记录的devicename值，将超链接置灰。 关键代码如下: <el-table> <el-table-column prop="deviceid" header-align="center" align="center" label="设备ID" width="170px"> <template slot-scope="scope"> <el-button type="text" size="smal
el-table实现单选和隐藏全选框和回显数据
最新发布
Gpointy的博客
11-09 934
【代码】el-table实现单选和隐藏全选框。
[ant design of vue ] table表格 ,选中行添加样式
AAAXiaoApple的博客
06-29 1461
table 表格 ， 选中行 添加样式
element表格el-table的指定行背景颜色修改
weixin_43923808的博客
08-15 6787
这里是将数据里name=部门达标情况的设置背景颜色为灰色。这里样式很重要,没有scoped。
element-ui el-table多选置灰
lhp_36kr的博客
08-11 5838
el-table多选置灰示例： 1. el-table用法： <el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-colum...
elementui 解决el-table多选 禁用时隐藏全选按钮
qq_58340302的博客
02-01 4829
这里，el-table被选中部分行，全选按钮还是会显示对勾，而不是半选中状态，容易使用户混淆。在el-table加 :header-cell-class-name="cellClass"
手把手教你实现el-table实现跨表格禁用选项，以及禁用选择后，对应的全选按钮也要禁用任何操作
m0_59157023的博客
04-19 2483
手把手教你实现el-table实现跨表格禁用选项，以及禁用选择后，对应的全选按钮也要禁用任何操作
element-ui table中使用type=‘selection‘ 实现禁用，勾选，默认选中不可修改 三种状态显示问题
热门推荐
蓝胖子的博客
08-25 1万+
element-ui table中使用type='selection' 实现禁用，勾选，默认选中不可修改 三种状态显示问题
vue 怎么拿到table表格的某一行元素
06-03
可以通过以下步骤拿到表格的某一行元素： 1. 在表格中给每一行元素绑定一个唯一的标识符，例如 `id` 或者 `key`。 2. 在 Vue 组件中使用 `ref` 属性获取到表格元素，例如 `<el-table ref="table">`。 3. 在 Vue 组件的方法中，通过 `this.$refs.table.$el.querySelectorAll('tbody tr')` 获取到所有行元素。 4. 遍历所有行元素，通过 `getAttribute('row-key')` 获取到该行元素的标识符，并与需要获取的行元素的标识符进行比较。 5. 找到需要获取的行元素后，可以通过 `querySelector` 方法获取到该行元素中的其他元素。 以下是一个示例代码： ```html <template> <el-table ref="table" :data="tableData" :row-key="row => row.id"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="gender" label="Gender"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { id: 1, name: 'John', age: 28, gender: 'Male' }, { id: 2, name: 'Jane', age: 24, gender: 'Female' }, { id: 3, name: 'Bob', age: 32, gender: 'Male' }, ], }; }, methods: { getTableRow(id) { const rows = this.$refs.table.$el.querySelectorAll('tbody tr'); for (let i = 0; i < rows.length; i++) { const rowId = rows[i].getAttribute('row-key'); if (rowId === id.toString()) { // 找到需要获取的行元素 const nameElement = rows[i].querySelector('.el-table_1_column_1'); const ageElement = rows[i].querySelector('.el-table_1_column_2'); const genderElement = rows[i].querySelector('.el-table_1_column_3'); console.log('Name:', nameElement.textContent); console.log('Age:', ageElement.textContent); console.log('Gender:', genderElement.textContent); break; } } }, }, }; </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值