How to make a table row clickable and expand the row - vue.js - element-ui

Question

I am using table that has expandable row feature. The row expands when the expand icon is clicked, you can check the example HERE. But, what I am trying to make is, the entire row clickable and toggle expand and collapse the row just like it works when the expand icon is clicked.

Please help.

Here is my markup:

<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>

Syed · Accepted Answer · 2018-08-27 05:52:36Z

20

Alright, I figured out the solution and answering my own question :)

Markup:

<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>

Style - scss

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

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

answered Aug 27, 2018 at 5:52

Syed

16.6k15 gold badges128 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Magnus Pääru Over a year ago

How would you trigger toggleRowExpansion in Vue3?

Magnus Pääru Over a year ago

Answer to my previous comment. ``` lang-js const tableData = ref(null); rowClicked(row) { tableData.value.$refs.elTable.toggleRowExpansion(row); } ```

Syed Over a year ago

@MagnusPääru - <script setup> import { ref } from 'vue'; const tableData = ref(null); const rowClicked = (row) => { tableData.value.$refs.elTable.toggleRowExpansion(row); }; </script>

Adham Muhammadjonov · Accepted Answer · 2022-03-06 03:20:48Z

0

I think there is better way to do so We have row-key in el-table, and expand-row-keys So every time you click you can change current expanded row even you can create behavior that "expan-one-at-a-time" Like: :expand-row-keys="[currentExpandedRow]"

answered Mar 6, 2022 at 3:20

Adham Muhammadjonov

13 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to make a table row clickable and expand the row - vue.js - element-ui

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related