<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>

这是一个使用 Element UI 组件库的表格组件，可以显示出日期、姓名、地址三列数据。其中的 tableDataList 数组是表格数据源，包含了四个对象，每个对象分别表示一行数据，包含了日期、姓名、地址三个属性。在模板中，使用 el-table 标签渲染表格，el-table-column 标签渲染表格的每一列，并且通过 prop 属性指定每一列对应的数据源属性。

相关问题

<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", } const 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>

这段代码是一个基于 Element UI 组件库的表格组件，其中包含三列分别为日期、姓名和地址，表格数据存储在 tableDataList 数组中。通过 el-table 组件的 data 属性绑定数据源，通过 el-table-column 组件的 prop 属性设置对应的数据属性，通过 label 属性设置表头名称。同时还设置了一些样式属性，如设置表格条纹样式和空数据时的提示信息。该组件可以用于展示简单的表格数据。