10

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
  • 15,657
  • 13
  • 120
  • 154

2 Answers2

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;
  }
}
Syed
  • 15,657
  • 13
  • 120
  • 154
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]"

Adham Muhammadjonov
  • 1
  • 3
  • 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](/help/how-to-answer). – Community Mar 06 '22 at 03:51