为什么不显示tableDataList里面的数据

这段代码中，tableDataList 数组在 script 标签中定义，但是它没有被导出，因此在 template 模板中无法直接引用。解决方法是将 tableDataList 数组添加到 export default 对象中，即将 const tableDataList = [...] 改为 this.tableDataList = [...]，然后在 el-table 组件的 data 属性中绑定 this.tableDataList，如下所示：

<template>
    <div style="padding-left: 10px; width: 100%">
        <el-table :data="tableDataList" border empty-text="暂无数据" stripe="true">
            <el-table-column prop="date" label="日期" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="address" label="地址" />
        </el-table>
    </div>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            tableDataList: [
                {
                    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>

这样就可以正确显示 tableDataList 中的数据了。