<template> <Table :row-class-name="rowClassName" :columns="columns1" :data="data1" border stripe></Table> </template> <script> export default { data(){ return { columns1: [ { title: 'Name', key: 'name' }, { title: 'Age', key: 'age' }, { title: 'Address', key: 'address' } ], data1: [ { name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park', date: '2016-10-03' }, { name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park', date: '2016-10-01' }, { name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park', date: '2016-10-02' }, { name: 'Jon Snow', age: 26, address: 'Ottawa No. 2 Lake Park', date: '2016-10-04' } ] } } } </script>
border 为表格添加边框
stripe 使表格变成斑马样式
columns 数组,表格每一列的标题(title)和key值
data 数组,表格每一行对应标题的详细数据