ElemeFE / element

A Vue.js 2.0 UI Toolkit for Web
https://element.eleme.io/
MIT License
54.12k stars 14.64k forks source link

[Bug Report] Sort of table not working when data contains null #18974

Open howard-repos opened 4 years ago

howard-repos commented 4 years ago

Element UI version

2.13.0

OS/Browsers version

win10/chrome

Vue version

2.6.11

Reproduction Link

https://codepen.io/kabike/pen/jOPxBpJ?editors=1010

Steps to reproduce

点击“姓名”列的排序

What is Expected?

null的数据在排序时应该相邻

What is actually happening?

null的数据在排序时不相邻

element-bot commented 4 years ago

Translation of this issue:

Element UI version

2.13.0

OS/Browsers version

Win10/chrome

Vue version

2.6.11

Reproduction Link

https://codepen.io/kabike/pen/jOPxBpJ?editors=1010

Steps to reproduce

Click the sorting of "name" column

What is Expected?

Null data should be adjacent when sorting

What is actually happening?

Null data is not adjacent when sorting

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

pscj commented 2 years ago

相同问题

EdwinBetanc0urt commented 4 months ago

I get this error with null values, if sorted in descending order it seems to work half way by placing the null value at the beginning of the rows when it should be at the end of the rows:

image

When trying to sort in ascending order, the sorting fails, the null value should be at the beginning of the rows:

image

I was able to apply a partial correction by handling the records that go into the data table, adding an additional column with the prefix of SORT_:

const recordsList = records.map((record, rowIndex) => {
  // TODO: Test peformance.
  Object.keys(record).forEach(key => {
    const currentValue = record[key]
      // Add column with sort values to correct sorting
      let sortValue = ''
      if (currentValue !== null && currentValue !== undefined) {
        sortValue = currentValue.toLowerCase()
      }
      record['SORT_' + key] = sortValue
  })
  return {
    ...record
  }
})

And in the-column place the sort-by property (SORT_ + key) of the new column added to the records.