How to make a table row clickable and expand the row - vue.js - element-ui
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; }}