title: How to correctly setup links in an Element UI table row (Should be easy?)
body: <p>I got a table with the user's projects in Element UI. Since Element UI doesn't work with <code>&lt;tr&gt;&lt;/tr&gt;</code> I'm a bit confused as how I would go about this. The purpose of the table is to display the user's projects and perform basic CRUD operations on them. That means that for every row a unique ID should be shown as a name, and for the actions they should let the user edit/delete that particular project with the unique ID. In a normal HTML table I'd it like this:</p>
  
  <pre><code>&lt;table class="table table-hover"&gt;
              &lt;thead class="table-header"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Actions&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr
                      v-for="project in personData"
                      :key="project._id"
                  &gt;
                      &lt;td&gt;{{ project._id }}&lt;/td&gt;
  
                      &lt;td&gt;
                          &lt;el-button
                              type="text"
                              size="mini"
                              @click="onLoad"
                          &gt;Load &lt;i class="el-icon-upload2" /&gt;&lt;/el-button&gt;
                          &lt;router-link
                              :to="{name: 'editproject', params: { id: project._id }}"
                              tag="span"
                          &gt;
                              &lt;el-button
                                  type="text"
                                  size="mini"
                              &gt; Edit &lt;i class="el-icon-edit" /&gt;&lt;/el-button&gt;
                          &lt;/router-link&gt;
                          &lt;el-button
                              type="text"
                              size="mini"
                              @click="deleteTemplate(project._id)"
                          &gt;Delete &lt;i class="el-icon-delete" /&gt;&lt;/el-button&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>That code produces the following <a href="https://gyazo.com/6303e97a68bff3a7d260291b76cec499" rel="nofollow noreferrer">table</a></p>
  
  <p>The edit and delete buttons can be clicked and that'll push to an edit route with the given ID for that row. </p>
  
  <p>Element UI tables bind the table data to the main <code>&lt;el-table&gt;</code> element and then you can specify the data that should be displayed in the rows with props. So I got it working with the id's. All I had to do was define a <code>&lt;el-table-column&gt;</code> with a prop of <code>_id</code> . My Element UI table currently looks like this: </p>
  
  <pre><code>&lt;el-table
              v-loading="loading"
              :data="personData"
              size="small"
              @cell-mouse-enter="onHover"
          &gt;
              &lt;el-table-column
                  label="Name"
                  prop="_id"
              &gt;
              &lt;/el-table-column&gt;
  
              &lt;el-table-column
                  label="Actions"
                  width="280"
              &gt;
                  &lt;el-button
                      type="text"
                      size="mini"
                      @click="onLoad"
                  &gt;
                      Load
                      &lt;i class="el-icon-upload2" /&gt;
                  &lt;/el-button&gt;
  
                  &lt;router-link
                      :to="{name: 'editproject', params: { id: _id }}"
                      tag="span"
                  &gt;
                      &lt;el-button
                          type="text"
                          size="mini"
                      &gt; Edit &lt;i class="el-icon-edit" /&gt;&lt;/el-button&gt;
                  &lt;/router-link&gt;
  
                  &lt;el-button
                      type="text"
                      size="mini"
                  &gt;
                      Download
                      &lt;i class="el-icon-download" /&gt;
                  &lt;/el-button&gt;
                  &lt;el-button
                      type="text"
                      size="mini"
                      @click="onDelete(scope.row.id)"
                  &gt;
                      Delete
                      &lt;i class="el-icon-delete" /&gt;
                  &lt;/el-button&gt;
              &lt;/el-table-column&gt;
          &lt;/el-table&gt;
  </code></pre>
  
  <p>That code produces the following <a href="https://gyazo.com/454ca05ce5e39e1bc9e4263b08551e72" rel="nofollow noreferrer">table</a></p>
  
  <p>The edit buttons should link with the proper <code>_id</code>. But any loop performed inside the table to get the correct id corresponded with an <code>edit</code> button results in that edit button shown twice. Which is an expected result. Unfortunately I cannot seem to figure out this easy problem... Can anyone help me with how I should go about this problem?</p>