海口网络建站模板,东莞哪里建设网站好,wordpress跳出循环,典型的电子商务网站antdvue是我目前项目的主流#xff0c;在工作过程中#xff0c;经常用到table组件。下面就记录一下工作中经常用到的部分知识点。 a-table#xff1a;表格组件常用功能记录——基础积累2 效果图1.table 点击行触发点击事件1.1 实现单选 点击事件1.2 实现多选 点击事件1.3 实…antdvue是我目前项目的主流在工作过程中经常用到table组件。下面就记录一下工作中经常用到的部分知识点。 a-table表格组件常用功能记录——基础积累2 效果图1.table 点击行触发点击事件1.1 实现单选 点击事件1.2 实现多选 点击事件1.3 实现行点击事件——不需要单选和多选 2.table 行样式调整——rowClassName 效果图 1.table 点击行触发点击事件
1.1 实现单选 点击事件
如果要实现的单选功能则需要在a-table上添加以下代码
:row-selection{selectedRowKeys: selectedRowKeys,type: radio,}
:customRowloadCustomRow1.2 实现多选 点击事件
如果要实现的多选功能则需要在a-table上添加以下代码
:row-selection{selectedRowKeys: selectedRowKeys,type: checkbox,}
:customRowloadCustomRow1.3 实现行点击事件——不需要单选和多选
:customRowonCustomRow上面代码中的loadCustomRow方法如下
loadCustomRow(record, index) {return {on: {click: () {//监听的是单选框的点击事件console.log(record, index);},change: () {//监听的是行的点击事件console.log(record, index);},},};
},2.table 行样式调整——rowClassName
在a-table组件上添加:rowClassNamerowClassNameFn
//行高亮
rowClassNameFn(row, index) {if (row.id xxx) {//符合条件的要高亮或者其他样式return hightCls;}
},对应的样式也要调整
/deep/.ant-table-tbody tr:hover td {background: #fff;
}
/deep/.ant-table-tbody tr.hightCls {background: #fff3e1 !important;
}
/deep/.ant-table-tbody tr.hightCls:hover td {background: #fff3e1 !important;
}
