Creating interactive table rows with expandable content in Vue.js using Element-UI

I have implemented a table with expandable row functionality. Currently, when the expand icon is clicked, the row expands. You can view an example HERE. However, I would like to make the entire row clickable in order to toggle between expand and collapse, similar to how it works when the expand icon is clicked.

Any assistance would be greatly appreciated.

Below is the markup I am using:

<template lang="pug">
  el-table(:data="tableData")
    el-table-column(label="Employee Name", prop="userName")
    el-table-column(label="Company Name", prop="companyName")
    el-table-column(type="expand", align="right" )
      template(slot-scope="props")
        p User Name: {{ props.row.userName }}
        p Company Name: {{ props.row.companyName }}
</template>
javascriptvue.jselement-ui

Answer №1

Success! I've managed to solve the problem on my own and here's the solution:

Code Snippet:

<template lang="pug">
  el-table(:data="tableData", @row-click="rowClicked", ref="tableData").clickable-rows
    el-table-column(label="Employee Name", prop="userName")
    el-table-column(label="Company Name", prop="companyName")
    el-table-column(type="expand", align="right" )
      template(slot-scope="props")
        p User Name: {{ props.row.userName }}
        p Company Name: {{ props.row.companyName }}
</template>

Script:

<script>
  export default {
    methods: {
      rowClicked(row) {
        this.$refs.tableData.toggleRowExpansion(row);
      }
    }
  }
</script>

Styling - SCSS

// click-able rows
 .clickable-rows {
   tbody tr td {
     cursor: pointer;
   }

   .el-table__expanded-cell {
     cursor: default;
   }
 }

Answer №2

There may be an alternative approach to consider. Instead of using row-key in el-table and expand-row-keys, you can utilize a method where each click can toggle the current expanded row. Additionally, you may implement a feature that allows for only one row to be expanded at a time, such as: :expand-row-keys="[currentExpandedRow]"

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

Vue 3 Single File Component experiencing a type error when assigning v-model to a textarea

I encountered an error in VSCode when trying to use v-model on a <textarea>. The error message states: (property) TextareaHTMLAttributes.value?: string | number | string[] | undefined Type 'Ref<string>' is not assignable to type &ap ...

vue.jsvuejs3eslintvolar

There is no feedback received upon clicking the login button

I recently implemented a PHP Login system using Joget SSO. Joget provides its own SSO script which I followed to create the login functionality. If the entered username and password match, it displays "login successfully"; otherwise, it shows "login fail ...

javascriptjquerysingle-sign-onjogetworkflow

Remove the class from all child elements and apply the class to the parent or ancestor of the element that was clicked on using

The Goal: I aim to achieve the following outcome. Whenever a user clicks on any of the radio inputs within the div that has the class corp-struct, I want to assign the following class to the parent element two levels up. This means that, in the example bel ...

javascriptjqueryhtmlcss

Struggling to accurately determine the intersection face vertex positions in Three.js

Hello there! I've been immersed in the world of three.js, dealing with loading models using THREE.JSONLoader. Currently, I'm faced with the task of selecting these objects and their faces, which I've managed to do successfully. Now, my goal ...

javascriptthree.jsintersectionvertex

Python API integrated website experiencing deployment issues on Github Pages

We are working on a group project with two other members, implementing a CRUD system using HTML, CSS, Vue.js, and an API hosted on pythonanywhere. We have successfully tested the system locally and it connects to pythonanywhere without any issues. However, ...

vue.jsgithub-pagespythonanywhere

(basic) Issue with Jquery ajax request not receiving data

The alert box is not displaying anything and is not returning any data from the specified URL, even though it should show the Google page! Any suggestions? I am using the POST method because I need to send querystring data as well. $.ajax({ ...

javascriptjqueryajax

Tips for embedding the <img> element inside the <a> element

I'm attempting to place an image within a hyperlink tag. Current code: <div class="Sample"> <a href="http://www.Sample.com"> <img src="http://www.Sample.com/Sloth.jpg"> </a> </div> I wish to add <img class= ...

javascriptjqueryimage

Reset an Angular service's public variable

I recently started working with Angular and encountered an issue that I couldn't find a solution for on Google or Stack Overflow. I believe my problem lies in not knowing what to search for. Here is the code snippet causing trouble: JSFiddle HTML &l ...

javascriptangularjs

Issue: A SyntaxError is triggered due to an unexpected termination of the JSON input while utilizing the fetch()

I encountered an issue while working on sending JSON between a Go API server and a React front-end. The error message I received was: Error: SyntaxError: Unexpected end of JSON input The specific line where the error is occurring is Line 25, which contai ...

javascriptjsonreactjs

Updating Vue.js template data

Here is the code snippet I am working with: Vue.component('greeting', { template: `<h1>{{ greeting }}</h1>`, data: function () { return { greeting: app.text } }, }); var app = new Vue({ e ...

vue.js

Creating a complex array structure using checkbox inputs within an Angular application

In my Angular application, I have a list of checkboxes that are dynamically generated using nested ng-repeat: <div ng-repeat="type in boundaryPartners"> <div class="row" ng-show="showBPtype[$index]"> <div class="col-xs-12"> ...

javascriptarraysangularjs

Ways to restrict a JavaScript object from being sent through ajax requests

I have developed an application that utilizes JSON to send messages through ajax. Here is the JavaScript object used for this purpose: var message = { "message_by": colmn[0].innerHTML, "message_date": new Date(), "message_recipients": [ { ...

javascriptjsonajaxjavascript-objects

What is the speed of communication for Web Worker messages?

One thing I've been pondering is whether transmission to or from a web worker could potentially create a bottleneck. Should we send messages every time an event is triggered, or should we be mindful and try to minimize communication between the two? ...

javascriptweb-worker

The technique of binding methods in React

When working with React.js, it's recommended to define your method binding in the constructor for better performance. Here's an example: constructor(props){ this.someFunction = this.someFunction.bind(this); } This approach is more efficient t ...

javascriptperformancereactjsreact-native

Sending an array from JavaScript to PHP and then back to JavaScript

I have a task to transfer an array from one webpage to a PHP page for it to be saved in a file, and then another webpage has to retrieve that array from the file. Currently, I have an array in JavaScript containing all the necessary information: JavaScri ...

javascriptphpjqueryajaxarrays

Exploring the power of Next JS by implementing server-side rendering with a

I am faced with the challenge of incorporating navigation into my layout by utilizing data from an API and then displaying it on specific pages. The catch is that the Layout file is not located in the pages folder, meaning I cannot use traditional getStati ...

javascriptreactjsnext.jsserver-side-rendering

leveraging React Router in conjunction with Next JS routing

As a newcomer to Next.JS, I have a simple question about managing routes in my web application. Currently, our project utilizes Next JS to handle routes in the BackEnd. However, I am facing a dilemma where I would like to use React-Router-Dom in a specifi ...

javascriptreactjsnext.jsreact-router-v4

Ways to verify that window.open is being invoked from a React component

In my React component, I have a set of nested components, each with its own checkbox. The state hook rulesToDownload starts as an empty array and dynamically adds or removes IDs based on checkbox selection. Upon clicking the 'download' button, t ...

javascriptreactjsdomenzymechai-enzyme

Discovering the quantity of arguments passed into a constructor in Node.js

In my Node.js code, I have a constructor that looks like this: function Tree() { //Redirect to other functions depending on the number of arguments passed. } I then created instances of objects like so: var theTree = new Tree('Redwood'); var ...

javascriptangularjsnode.jsobjectconstructor

Is it possible to hide a fixed header on scroll in a mobile device?

I am facing an issue with my Wordpress site where I want the header to hide when the user scrolls. Despite trying various codes, I have been unable to make it work. The reason for wanting to hide the header is that on mobile devices, it causes scroll prob ...

javascriptcsswordpressjquery-mobile