网站服务器建设方法,教育网站前置审批,中国建设银行甘肃省分行 官方网站,wordpress 嵌套评论需求场景#xff1a;点击【新增】按钮可以在分页弹窗中跨页多选选择数据后添加到页面中#xff0c;再次点击【新增】#xff0c;已经选择过的数据则置灰不让重复选择。 选择后#xff0c;置灰 点击【确定】数据添加到页面中#xff0c;可再次点击【新增】进行添加数据 …需求场景点击【新增】按钮可以在分页弹窗中跨页多选选择数据后添加到页面中再次点击【新增】已经选择过的数据则置灰不让重复选择。 选择后置灰 点击【确定】数据添加到页面中可再次点击【新增】进行添加数据
解决步骤1table组件的写法 a-table:row-key(r) r.id:columnscolumns:dataSourcedataSource:paginationpaginationchangechangeTable:row-selectionrowSelection:rowClassNamerowClassNameFnbordered:scroll{ y: 400 }/a-table1.columnstable表格配置的列 2.dataSourcetable表格的数据源 3.pagination分页参数 4.changeTable切换页码/页容量 5.rowSelection计算属性用于实时获取选择情况 6.rowClassNameFn行样式 从rowSelection开始说吧前面的只要是有点经验的都会知道了。。 computed: {rowSelection() {return {selectedRowKeys: this.selectedRowKeys,selectedRows: this.selectedRows,onChange: (selectedRowKeys, selectedRows) {this.selectedRowKeys selectedRowKeys;},onSelect: (record, selected, row) {if (selected) {this.selectedRows.push(record);} else {let selectedRows [...this.selectedRows];this.selectedRows selectedRows.filter((item) item.id ! record.id);}},onSelectAll: (selected, selectedRows, changeRows) {if (selected) {this.selectedRows this.selectedRows.concat(changeRows);} else {let selectedRows [...changeRows];this.selectedRows selectedRows.filter((item) this.selectedRowKeys.indexOf(item.id) -1);}},getCheckboxProps: (record) ({props: {disabled:this.areadyRows this.areadyRows.filter((item) (item.controlCardNo || item.cardNo) record.cardNo).length 0,},}),};},},上面的selectedRows和selectedRowKeys就是对应的行id集合以及行集合数组areadyRows就是已选择的数据这个跟selectedRows不一样的问题在于是否跨页。
行样式
//行高亮
rowClassNameFn(record) {if (this.areadyRows this.areadyRows.filter((item) (item.controlCardNo || item.cardNo) record.cardNo).length 0) {return disabledCls;}
},设置样式
style langless scoped
/deep/.ant-table-tbody tr.disabledCls {background: #f7f7f7 !important;
}
/deep/.ant-table-tbody tr.disabledCls:hover td {background: #f7f7f7 !important;
}
/style完成多多积累多多收获
