ElementUI表格组件列表内容其中一列替换为超链接

有时候运用表格组件, 需要将内容的其中一列变成可点击的超链接, 代码如下

<el-table :data="tableData">
    <el-table-column prop="title" label="标题">
        <template #default="scope">
            <a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
        </template>
    </el-table-column>
</el-table>

其中scpoe.row.title代表的是tableData里title项的数据, 就可以完成替换

也可以添加元素进表格, 完成以下效果

<el-table :data="tableData">
    <el-table-column prop="title" label="标题">
        <template #default="scope">
            <div style="display: flex; align-items: center; justify-content: center;">
                <div :class="scope.row.status === '已办理' ? 'status-done' : 'status-yet'"></div>
                <span style="margin-left: 10px">{{ scope.row.status }}</span>
            </div>
         </template>
    </el-table-column>
</el-table>