CODEWITHSUNDEEP
javascriptvue.jselement-ui
Syed
Syed

Reputation: 16513

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

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>

Upvotes: 10

Views: 17759

Answers (2)

Adham Muhammadjonov
Adham Muhammadjonov

Reputation: 1

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

Upvotes: 0

Syed
Syed

Reputation: 16513

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

Upvotes: 20

Related Questions