Write at the beginning ：
element-ui Of table Components have several properties that work well , however ant-design in table There are no components .
such as ：
stripe： Is it zebra table.
highlight-current-row： Do you want to highlight the current row .
of course , There are several other attributes , But this article only talks about these two . since element-ui yes ,ant-design No, , Then I'm using it ant-design Of table Component time , What do you want to do with these two functions ?
The answer is salad . Since it has not , Then write it yourself , That's secondary packaging .
ok, Let's implement the function of this attribute first ：highlight-current-row.
highlight-current-row
first , Definition, of course prop variable ：highlightCurrentRow; Define another one prop variable currentRow.
And then in the watch Monitor in currentRow Changes in , Every time when currentRow Time for change , Render the style of the last selected line and the current selected line .
currentRow (val) { if (this.highlightCurrentRow) {
this.renderRowStyleAfterRowClick(val) } }
highlightCurrentRow by true When I was young , You need to render a new style .
renderRowStyleAfterRowClick：
// After selecting a row , Styles for rendering table rows renderRowStyleAfterRowClick (currentRow) { const elements =
document.getElementsByClassName('ant-table-row') const rowSelectionElement =
document.getElementsByClassName('row-selection') // Gets the last selected row , And remove its selected style if
(rowSelectionElement.length > 0) {
rowSelectionElement[0].classList.remove('row-selection') } // Adds the style of the selected row to the currently selected row if
(elements.length > 0) { const rowList = [...elements] rowList.find(t =>
t.dataset.rowKey === currentRow.id).classList.add('row-selection') } }
The code is actually very simple ：
Take all the information on the current page of the form first row element （table The component does not provide a native name for the current click line class） And currently selected row element .
If there are currently selected rows , Remove this previously added one first css class 'row-selection'.
Then add a new value to the currently selected row class 'row-selection'.
Then there is a question here , How can I find my current line ?table The component does not provide the name of the currently selected row class（ At least I didn't find it ）, All I can do is t adopt class name
'ant-table-row' Get everything row, Then find the line you are currently clicking on .
A key attribute needs to be used at this time ： rowKey.
Remember ant-design table Component api Pay attention to the one at the end of the file ?
Here's a reminder ,rowKey Used to specify the housing of the data column , That is, the unique mark of each line , So easy .
We quote table When the components are installed , take rowKey Set as the primary key of the table data source , So we can extract the dataset From the rowKey, Then find the current click line .
rowList.find(t => t.dataset.rowKey === currentRow.id)
And then add it dynamically to this element class ‘'row-selection’.
// Add hover style to table and select style to current click line .ant-table-row { &:hover > td { background-color:
@background-color !important; color: #fff !important; } &.row-selection {
background-color: @background-color !important; color: #fff !important; } }
It's set here hover Line style is the same as click line style , It's to keep the line from clicking , When the line hovers , There are other different styles . If you don't want to set it to the same , You can set the time of line click separately hover The style is the same as when the line is clicked .
// Add hover style to table and select style to current click line .ant-table-row { &.row-selection { background-color:
@background-color !important; color: #fff !important; &:hover > td {
background-color: @background-color !important; color: #fff !important; } } }
such , Our goal has been achieved .
On line Click , modify currentRow,table Component internal through watch Monitoring currentRow Changes in , It triggers a way to change the style .
<s-table ref="table" size="default" rowKey="id" :columns="columns"
:verticalScroll="false" :data="loadData" :stripe="true"
:highlightCurrentRow="true" :currentRow="selectedCustomer"
:customRow="rowClick"> ... rowClick: record => ({ // event on: { click: () => {
this.handleCurrentRowChanged(record) } } }) handleCustomerChanged (record) {
this.selectedCustomer = record }
That's it .
stripe( Zebra lines )
Implementation line stripe function , It's still relatively simple .
add to prop variable stripe, In the update Function hook inner , Call the method to realize zebra stripes
updated () { if (this.stripe) { this.renderStripe() } }
There are many ways to achieve zebra stripes , Only one of them is shown here ：
// Zebra row format display of table rows renderStripe () { const table =
document.getElementsByClassName('ant-table-row') if (table.length > 0) { const
rowList = [...table] rowList.forEach(row => { const index =
rowList.indexOf(row) if (index % 2 !== 0) { row.style.backgroundColor =
'#f7f7f7' } else { row.style.backgroundColor = '#ffffff' } }) } },
Get table All lines of , Then it is interlaced to set a different line background color , The goal is achieved .
There are more ways of friends welcome to add .
Technology
Daily Recommendation