ant desing vue table 点击表格，实现背景行变色

直接利用rowClassName这个参数，直接上代码

<a-table
:rowClassName="(record,index)=>{ retrun index===selectIndex?'active':' '}"
:customRow="rowClick"
></table>data(){return{selectIndex=null}
},
method:{
rowClick(record,index){
return{props:{}on:{click: event => {this.selectIndex=index}}}}
}

另外在全局样式中加上 .active的样式。ps: 这个全局样式要在main.js中定义在antd.less的下面,否则没办法覆盖antd.less中的样式

2、单击行使该行选中

   <a-table:customRow="handleCheck":rowSelection="{type:'radio',onChange:onSelectChange,selectedRowKeys}"    >
</a-table>handleCheck(record, index) {return {on: {click: () => {let code = this.modeType;if (this.selectedRowKeys) {this.selectedRowKeys = [];}if (this.selectedRows) {this.selectedRows = [];}this.selectedRowKeys.push(record[code]);this.selectedRows.push(record);}}};},

ant desing vue table 点击表格，实现背景行变色相关推荐

ant design vue table表格组件实现隔行变色
ant design vue table表格组件实现隔行变色一.使用方法 html代码: <a-table:columns="patient":data-source=&q ...
vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用场景复现实际操作解决a-table表格padding过宽知识调用文章中可能会 ...
ant design vue table分页
ant design vue table分页设置 1.设置pagination <a-table :columns="columns" :dataSource="d ...
Ant Design Vue Table 组件合并单元格
Ant Design Vue Table 组件合并单元格项目开发中,有时候需要实现单元格合并的需求,这里记录一下在Ant Design Vue的实现. <template><div ...
jQuery:表格的奇偶行变色，jquery实例之表格隔一行
jQuery:表格的奇偶行变色<html> <head> <title>表格变色</title> <style type="text/c ...
JQuery实现表格奇偶数行变色
HTML代码部分start <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue
今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 .好了,话不多说,直接开始: 组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我 ...
Ant Design Vue table表格点击行选中多选框
参考官方文档,实现点击行选中前边的多选框 <template><div><a-table :rowSelection="{selectedRowKeys: se ...
ant design vue table 高度自适应_html之table表格
概述 html中提供了一个table表格的东西,不过到现在来说,用处基本上不是很大,但有些报表的项目中还是会用到的.此内容可以稍微一带而过,用到的时候,再回来复习也不迟.表格由 <table&g ...
ant中的table和pagination表格分页结合使用手写分页
表格部分 <a-table:row-selection="rowSelection" :columns="columns":data-source=&qu ...

ant desing vue table 点击表格，实现背景行变色

ant desing vue table 点击表格，实现背景行变色相关推荐

最新文章

热门文章