How to correctly setup links in an Element UI table row (Should be easy?)

问题

I got a table with the user's projects in Element UI. Since Element UI doesn't work with <tr></tr> 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:

<table class="table table-hover">
            <thead class="table-header">
                <tr>
                    <th>Name</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr
                    v-for="project in personData"
                    :key="project._id"
                >
                    <td>{{ project._id }}</td>

                    <td>
                        <el-button
                            type="text"
                            size="mini"
                            @click="onLoad"
                        >Load <i class="el-icon-upload2" /></el-button>
                        <router-link
                            :to="{name: 'editproject', params: { id: project._id }}"
                            tag="span"
                        >
                            <el-button
                                type="text"
                                size="mini"
                            > Edit <i class="el-icon-edit" /></el-button>
                        </router-link>
                        <el-button
                            type="text"
                            size="mini"
                            @click="deleteTemplate(project._id)"
                        >Delete <i class="el-icon-delete" /></el-button>
                    </td>
                </tr>
            </tbody>
        </table>

That code produces the following table

The edit and delete buttons can be clicked and that'll push to an edit route with the given ID for that row.

Element UI tables bind the table data to the main <el-table> 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 <el-table-column> with a prop of _id . My Element UI table currently looks like this:

<el-table
            v-loading="loading"
            :data="personData"
            size="small"
            @cell-mouse-enter="onHover"
        >
            <el-table-column
                label="Name"
                prop="_id"
            >
            </el-table-column>

            <el-table-column
                label="Actions"
                width="280"
            >
                <el-button
                    type="text"
                    size="mini"
                    @click="onLoad"
                >
                    Load
                    <i class="el-icon-upload2" />
                </el-button>

                <router-link
                    :to="{name: 'editproject', params: { id: _id }}"
                    tag="span"
                >
                    <el-button
                        type="text"
                        size="mini"
                    > Edit <i class="el-icon-edit" /></el-button>
                </router-link>

                <el-button
                    type="text"
                    size="mini"
                >
                    Download
                    <i class="el-icon-download" />
                </el-button>
                <el-button
                    type="text"
                    size="mini"
                    @click="onDelete(scope.row.id)"
                >
                    Delete
                    <i class="el-icon-delete" />
                </el-button>
            </el-table-column>
        </el-table>

That code produces the following table

The edit buttons should link with the proper _id. But any loop performed inside the table to get the correct id corresponded with an edit 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?

回答1:

By using the slot of the column you can access the whole row:

According to element-ui documentation (https://element.eleme.io/#/en-US/component/table):

Custom content for table columns. The scope parameter is { row, column, $index }

    <template>
  <el-table v-loading="loading" :data="personData" size="small" @cell-mouse-enter="onHover">
    <el-table-column label="Name" prop="_id"></el-table-column>
    <el-table-column label="Actions" width="280">
      <template v-slot:default="table">
        <router-link :to="{name: 'editproject', params: { id: table.row._id }}" tag="span">
          <el-button type="text" size="mini">
            Edit
            <i class="el-icon-edit" />
          </el-button>
        </router-link>
      </template>
    </el-table-column>
  </el-table>
</template>

来源：https://stackoverflow.com/questions/57644044/how-to-correctly-setup-links-in-an-element-ui-table-row-should-be-easy