Arranging decimal numbers in Element UI columns

Hey there, I'm currently working on creating a table using Element UI. One of my columns has float values, but when I try to make the column sortable, it doesn't sort correctly.

Below is the code for my column:

<el-table-column
  label="Total Opportunity"
  prop="blood_utilization_opportunity"
  sortable
>
  <template slot-scope="slotData">
     <span>{{slotData.row.blood_utilization_opportunity}}</span>
  </template>
</el-table-column>

I've been checking out the Element UI Table-column Attributes, but I can't seem to find the right one to help me sort through floats accurately... Any suggestions?

javascriptvue.jselement-ui

Answer №1

Your information is categorized as a String, not a Number.

Answer №2

There exists a well-known "sort" issue in javascript involving the traditional sort function.

Instead of sorting numbers based on the whole number, it sorts them by digit.

For example :

const arr = [1.1, 2.2, 3.3, 4.1, 5.6, 11.1, 12.0, 21.0].sort()
console.log(arr)

Referencing the information in the documentation

To implement custom sorting rules, utilize sort-method or sort-by

Therefore, it is recommended to define your own sorting method within the methods and assign it to the component

Method

methods: {
   sortListMethod(a, b){
      return a - b
   }
}

Template

<el-table-column
  label="Total Opportunity"
  prop="blood_utilization_opportunity"*
  sort-method="sortListMethod"
  sortable
> ... </el-table-column>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with passing JSON data to a PHP file using CURL

I am currently working on a project that involves sending exam data with the exam-name and the selected number of questions from a list. Here is the project architecture I am following: To send JSON via AJAX to my make_exam.php file The questions.php fil ...

javascriptphpajaxcurl

Ways to access the value of an input field using Javascript

I am currently utilizing the valums-file-uploader plugin for file uploads via ajax. However, I have encountered an issue with its functionality. Below is the script that I am using: <input type="text" id="Gaurav" name="Gaurav" /> <script src="fil ...

javascripthtmljquery

What is the best way to horizontally align three animated progress bars alongside images?

Check out this jsfiddle that shows a vertical alignment of the progress bars. How can I modify it to align them horizontally and centered? https://jsfiddle.net/bLe0jLar/ .wrapper { width: 100px; height: 100px; } .wrapper > #bar, #bar2, #bar3 { ...

javascripthtmlcssflexbox

Interactive rotating display with constantly updating information

Recently I started learning angularJS and I must say, I am already hooked. I have developed a website that pulls data from JSON files (created by external scripts) locally to show real-time information on various pages. Now, I want to include a sliding car ...

javascriptjqueryangularjstwitter-bootstrapcarousel

Issues with sending parameters in JQuery Ajax POST request

Currently, I am delving into Ajax and encountering some issues with sending requests from the client side. I have a jsp file located at "/web" on my local server to manage requests. Though unsure if this is the best approach or if it should be handled by ...

javascriptjqueryjsonajaxjsp

The Lightbox containing an IFrame is experiencing flickering issues when links are clicked

I am experiencing a similar issue with this post: How can I resolve flickering in IFrames? Unfortunately, I have yet to find a solution (and I'm worried about receiving negative ratings too :) ). Due to the fact that my website is on an intranet, I ...

javascriptiframepopup

What is the best way to assign a numeric variable to the value attribute of an HTML form input?

Is there a way to assign a numeric value to the value attribute of an HTML form input element using a variable? I understand that the value attribute automatically gets converted to a string. How can I make sure the variable is read before being converted? ...

javascripthtmlvue.js

Crawlers designed to handle websites with never-ending scroll feature

Currently seeking a crawler application that can analyze the JavaScript on a webpage for AJAX requests and identify functions that initiate those calls in order to retrieve all content from start to finish. I would develop this myself, but my workload is ...

javascriptajaxweb-crawlerinfinite-scroll

NodeJs Importing a File

Currently working with NodeJS, I have encountered a challenge. Is it possible to require a JavaScript file in Node similar to how we do in browsers? When using the require() method, I noticed that the JavaScript file called does not have access to global v ...

javascriptnode.js

Utilizing JSDoc for establishing an index signature on a class in ES6

When working with JSDoc, achieving the equivalent of Typescript's computed property names can be a challenge. In Typescript, you'd simply define it like this: class Test { [key: string]: whatever } This syntax allows you to access these comput ...

javascripttypescriptjsdoces6-classindex-signature

Vows, Tobi, and Node.js come together for comprehensive REST API testing

Currently, I am in the process of merging the examples here and here to create a vows test for my node.js / express application that does the following: Creates a new user object Verifies that the response is correct Utilizes the returned _id to perform ...

javascriptnode.jsexpressvows

What is preventing me from using .bind(this) directly when declaring a function?

Consider the code snippet below: function x() { this.abc = 1; function f1() { alert(this.abc); }.bind(this) var f2 = function b() { alert(this.abc); }.bind(this); } I am curious about how to make the "this" of the out ...

javascript

The placement of the button is not correct and should be adjusted to the proper position

I have created a webpage with two distinct sections, each occupying the height of the viewport. The first section contains a 'work' button in the center. Upon clicking this button, it disappears and is replaced by some links. The same functionali ...

javascripthtmlcssbuttonposition

The type 'Observable<void | AuthError>' cannot be assigned to 'Observable<Action>'

I am encountering an error that reads: error TS2322: Type 'Observable<void | AuthError>' is not assignable to type 'Observable<Action>'. Type 'void | AuthError' is not assignable to type 'Action'. Type &a ...

javascriptangulartypescriptrxjsngrx

The function $.getJSON() seems to be non-responsive

I've been struggling to solve this issue for quite some time now. The users.json file that I am using can be found in the "JSON" folder alongside the other files. The alert("Before") is functioning properly, but I'm facing difficulty with getting ...

javascriptjqueryjsonajax

Using Google Maps to trace a line showing the distance traveled

I want to create a 'distance traveled' polyline along a set route using V3 of the Google Maps API. The polyline should pass through multiple waypoints/legs. Currently, I am using the DirectionsService to draw the entire route. In addition, I a ...

javascriptgoogle-mapsgoogle-maps-api-3google-polyline

I am looking to design a pair of Carousels that will be positioned right next to

Is it possible to set up two Carousels next to each other? https://i.sstatic.net/Dv7PB.png <div class="row"> <div class="col-md-2"></div> <div class="col-md-8"> <div id="Carousel" class="carousel slide"> ...

javascripthtmlcssbootstrap-4carousel

The onchange tag fails to trigger my Javascript function when selected

Here is the code I have: JS: function updateLink() { var selType = document.getElementByID("Types"); var selLen = document.getElementByID("Length"); var selLoc = document.getElementByID ...

javascripthtmldjangohtml-select

Securing paths in NuxtJS

Hey there! I'm just getting started with nuxt and have set up the following routes: /home /dashboard /login My goal is to secure the /dashboard route only for users who are logged in and have a token stored in LocalStorage. The simplest solution ...

javascriptvue.jsnuxt.js

When attempting to refresh the page, an error occurred stating: 'Unhandled TypeError: Cannot access properties of undefined (reading FetchApi.js:23 'data')'

Upon the initial run of the code, the mappings data appear as desired. However, upon refreshing the page, an error is displayed. Can someone please advise on how to rectify this error and what could be causing it? The provided code: import React, { useE ...

javascriptarraysreactjsapiaxios