Is there a way to incorporate a computed value into a table prop while working with Element UI?

In my frontend development, I am utilizing vuejs along with element ui. I am faced with the task of rendering a table that includes dates in unix format. To make these dates more user-friendly, I have incorporated moment.js to convert them into a readable format.

However, I have encountered difficulties when trying to implement moment js within a table prop as it fails to display any results.

Below is an example of my code snippet for the table:

    <el-table
            :data="data"
            style="width: 100%"
          >
            <el-table-column
              prop="name"
              label="Name"
              width="180"
            />
            <el-table-column
              prop="address"
              label="Address"
              width="180"
            />
            <el-table-column
              prop="email"
              label="Email"
            />
            <el-table-column
              prop="moment(due)"
              label="Last Activity"
            />
    </el-table>

If the moment js function call is removed, the date appears in unix format. However, I require it to be presented in a human-readable form.

javascriptvue.jselement-ui

Answer №1

To start, make sure that the prop accurately represents the date key within the table data. Then, you can insert a template slot into the desired table column to incorporate your moment. The method of fetching table data may vary, but this approach should still prove effective.

 <el-table-column prop="created_at" label="Joined">
   <template slot-scope="props">
     {{ props.row.created_at | moment("MMMM Do YYYY") }}
   </template>
 </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

I Am unable to locate the '...' after applying the text-ellipsis style to a div

https://i.stack.imgur.com/Tsmf5.png The ellipsis '...' is not showing up even after I have applied text-ellipsis, overflow hidden, and nowrap to this div. Take a look at my code: import Image from "next/future/image"; import Link from ...

javascriptcssnext.jstailwind-css

Lazy loading AngularJS UI router named views is an efficient way to improve performance

AngularJS UI router named views loading based on user access rather than loading at the time of state route access. Example: $stateProvider .state("login", { url: "/login", templateUrl: getTemplateUrl("login/Index") }) ...

javascriptangularjsasp.net-mvc-4angular-ui-router

What is the correct way to reference this data element in Ajax?

I am attempting to retrieve the elevation data for 732 meters from the JSON API response below: {"results":1,"data":[{"wind":{"degrees":200,"speed_kts":6,"speed_mph":7,"speed_mps":3,&quo ...

javascriptjqueryjsonajax

Dynamic manipulation of classes based on user attributes

One thing I've noticed is that certain WordPress themes, like 'Thematic', include user-specific classes in the body element to avoid using CSS browser hacks. For example: wordpress y2010 m02 d26 h05 home singular slug-home page pageid-94 pa ...

phpjavascriptjquerycssdynamic

How to showcase base64 encoded images in pug (jade) with node.js

Can anyone help with decoding this mysterious data and displaying the image? I'm using pug as my template engine. Below is the questionable data that needs to be shown as an image: /9j/4AAQSkZJRgABAQEAYABgAAD/4QBaRXhpZgAATU0AKgAAAAgABQ ...and so f ...

javascriptnode.jsexpresspug

What methods are available to transfer a variable from one component to another in React?

In my React app, I have a form component that interacts with a PostgreSQL database to send data. Here is the script for my form: import bodyParser from 'body-parser'; import React, { Fragment, useState } from 'react'; import RatingStar ...

javascriptreactjs

Automatically rehydrate an instance using Angular and JavaScript

REVISION Special thanks to Shaun Scovill for providing an elegant solution using lodash // Creating an instance and injecting server object - within the ChartService implementation below var chart = new Chart(serverChartObject); // Replacing ...

javascriptangularjs

The request to check the API at http://localhost/v5/api/checker returned a 404 error, indicating that

Trying to create a function that uses AJAX to call PHP, but encountering an error when clicking the button. Does anyone know how to solve this issue? Code provided below. PHP: $app->get('/checker', function () { $jsonContents = file_get_ ...

javascriptphpajaxslim

Tips for disabling autofocus on textarea when it is initially created in Internet Explorer browser

By clicking a button, I can generate a new <textarea></textarea>. However, in Internet Explorer, the cursor automatically moves to the newly created text area. Is there a way to prevent this from happening? ...

javascriptjqueryhtmlcss

How to Use Express.js to Stream Assets (JS/CSS/images) from Amazon S3

After successfully launching my Node.js blog on AppFog, I have the idea of utilizing an Amazon S3 bucket to host and stream all my assets such as javascript, stylesheets, and images. I am now wondering how I can configure Express.js to properly serve thes ...

javascriptnode.jsamazon-s3expressappfog

Upon executing the `npm start` command, the application experiences a crash

When I tried following the steps of the Angular quickstart guide, I encountered some errors after running "npm start". Here are the errors displayed: node_modules/@angular/common/src/directives/ng_class.d.ts(46,34): error TS2304: Cannot find name 'Se ...

javascriptangulartypescriptnpm

Tips for saving HTML data locally

Is there a way to persist my HTML element tag data even after the user closes the browser? For example: <div class="classOne" data-random="50"> If I use jQuery to change the data attribute like this: $(".classOne").attr("data-random","40") How ca ...

javascriptjqueryhtml

Create an mp3 file using the arrayBuffer functionality

Struggling with StackOverflow, I attempted to record audio from a Raspberry Pi using Node.js (1). The audio stream is then sent through a WebSocket server (code omitted for simplicity), where a Vue.js WebSocket listens to the stream. My goal is to save thi ...

javascriptnode.jsvue.jsaudiowebsocket

Is it necessary to utilize Babel with Node.js?

I am aware that Node.js fully supports ES6 now, using version 7.2.1. Recently, I was advised by someone that the current ES6 implementation in Node.js may not be production ready and that I might need to use Babel for a more robust ES6 set-up. After visit ...

javascriptnode.jsecmascript-6babeljs

What options are available to enable the user to input information into the v-time-picker component?

I am looking for a solution where users can input digits into the vuetify v-time-picker, while still being able to select the time on the clock. <v-col align-self="center"> <v-menu ref="menuTimeStart" v-model="me ...

javascriptvue.jsdatatablevuetify.js

Finding the element in the HTML using selenium and Python

Recently, I have been working on automated testing using Selenium. However, I have encountered a strange issue where I am unable to locate the element. Can someone please provide me with guidance on how to handle this situation? driver.find_element_by_xpa ...

javascriptpythonselenium

Currently in motion post file selection

I am currently facing an issue with a button that triggers a file selector pop-up. Below is the code snippet: <button mat-raised-button (click)="inputFile.click()">Choose a file</button> <input #inputFile type="file" [style.display]="' ...

javascripthtmlangularfile-upload

When trying to retrieve a value from a custom render function in React with TypeScript, an error occurs indicating that the value is not assignable to type 'ReactNode'

Recently, I attempted to develop a versatile swiper component using Next.js 13 (App Router) v13.4.12 along with TypeScript. However, I encountered an issue when trying to access data from the component props, which involves a custom function for rendering ...

javascriptreactjstypescriptswiper.js

Updating Jqplot display upon ajax call completion

Currently, I have a Jqplot set up using the AJAX JSON Data Renderer and it's functioning properly. There is a button on the page where users can input new values (updated through ajax) which are then stored in the same DB as the json data source. Whe ...

javascriptjqueryajaxjsonjqplot

Automatic selection of default option

I am currently working on a component that allows users to edit a product. Within the select element, my goal is to set the default option as the product category. I want to automatically select the option that matches the name of the product's catego ...

vue.jsselected