element-ui中的el-table相关问题

使用每一行的数据

比如我有如下json：

list: [
{
card_id: "14",
card_title: "242342",
card_author: "陈烛光",
template_id: "21",
template_preview: null,
created_at: "2023-04-03 14:48:25"
},
{
card_id: "13",
card_title: "我很四面",
card_author: "陈烛光",
template_id: "21",
template_preview: null,
created_at: "2023-04-03 09:25:07"
},
{
card_id: "12",
card_title: "33333",
card_author: "武斌",
template_id: "21",
template_preview: null,
created_at: "2023-04-03 09:09:31"
},
...
]

以及我的el-table如下：

<el-table :data="cardList"
           row-key="card_id"
           size="large"
           style="width: 100%"
>
    <el-table-column prop="card_id" label="卡片ID" width="80"></el-table-column>
    <el-table-column prop="card_title" label="卡片标题"></el-table-column>
    <el-table-column label="效果预览" width="100">
        <template #default="scope">
            <a class="temp-preview"
                v-if="scope.row.template_preview"
                :href="scope.row.template_preview"
                target="_blank"
                title="点击查看大图"
            >
                <img src="scope.row.template_preview">
            </a>
            <p v-else class="no-preview">无</p>
        </template>
    </el-table-column>
    <el-table-column prop="card_author" label="编辑人员" width="100"></el-table-column>
    <el-table-column prop="created_at" label="创建日期" width="180"></el-table-column>
    <el-table-column label="操作" width="200">
        <template #default="scope">
            <el-button type="primary" @click="openCardEditor(scope.row)">编辑</el-button>
            <el-button type="danger">删除</el-button>
        </template>
    </el-table-column>
</el-table>

其中cardList就是对应的list中的数据。我们可以看到，如果要简单渲染，将每行中每一个字段对应的值渲染到模板中，只使用prop即可。但是如果我要自定义使用 这一行中某个字段的值呢？

这时候，我们需要使用：

<template #default="scope">
            <a class="temp-preview"
                v-if="scope.row.template_preview"
                :href="scope.row.template_preview"
                target="_blank"
                title="点击查看大图"
            >
                <img src="scope.row.template_preview">
            </a>
            <p v-else class="no-preview">无</p>
        </template>

其中scope.row对应的就是当前行，比如我现在是第三行，那么scope.row的值就是：

{
card_id: "12",
card_title: "33333",
card_author: "武斌",
template_id: "21",
template_preview: null,
created_at: "2023-04-03 09:09:31"
},

如果要用到第三行template_preview字段的值，那么就是：

scope.row.template_preview

需要注意的是，取出的scope是一个这种格式：

{store: {…}, _self: {…}, column: {…}, row: Proxy, $index: 2, …}

scope.row是一个proxy，而如果我们需要取到行的index，那么：

scope.$index

额外的注意，遍历的时候最好要给每一行指定一个固定的row-key="card_id"

比如，el-table没有给每一行添加key时，当我们删除第二行数据时，焦点会自动聚焦在变为第二行的第三行数据按钮上。

原因：

删除一行数据时，Vue会认为我们把2变成了3，把3删除了。所以只会把第二行的数据变成第三行，但是按钮的状态会就地复用。

解决：

给每一行添加一个key，el-table设置row-key

<el-table :row-key="record=>record.id"></el-table>// id为表格数据中的一个属性（唯一），record为每一行数据

或者

<el-table row-key="id"></el-table>// row-key此时不带冒号，绑定值为数据中属性id

注：表格中不建议使用index作为key，删除数据时，索引会自动连续，（1,2，3删除第2，索引会自动变成1,2，而不是1,3）所以Vue仍然会认为删除的是第3项，而不是第2项。

让表格内容居中

有两种方式，第一种：

<el-table :data="cardList"
                  :stripe="true"
                  :border="true"
                  :header-cell-style="{'text-align':'center'}"
                  :cell-style="{'text-align':'center'}"
                  size="large"
                  style="width: 100%"
        >

:header-cell-和:cell-

直接设置统一的样式即可。

第二种：

<el-table-column align="center" />

相关资料