<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 属性设置表头名称。同时还设置了一些样式属性，如设置表格条纹样式和空数据时的提示信息。该组件可以用于展示简单的表格数据。