使用插槽或属性来自定义列的内容

 使用 ​#default​ 插槽来自定义列的内容:

        <el-table-column label="Date" width="180">
            <template #default="scope">
                <span>{{ scope.row.date }}</span>
            </template>
        </el-table-column>

        <el-table-column label="Date" width="180">
            <template #default="{ row }">
                <span>{{ row.date }}</span>
            </template>
        </el-table-column>

每个 ​<el-table-column>​ 子组件使用了 ​prop​/property 属性来指定对应的列数据字段：

<template>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
    </el-table>
</template>
  
<script lang="ts" setup>
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
</script>