title: How to make a table row clickable and expand the row - vue.js - element-ui
body: <p>I am using table that has expandable row feature. The row expands when the expand icon is clicked, you can check the example <a href="http://element.eleme.io/#expandable-row" rel="noreferrer">HERE</a>. But, what I am trying to make is, the <strong>entire row</strong> clickable and toggle expand and collapse the row just like it works when the expand icon is clicked.</p>
  
  <p>Please help.</p>
  
  <p>Here is my markup:</p>
  
  <pre><code>&lt;template lang="pug"&gt;
    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 }}
  &lt;/template&gt;
  </code></pre>