vue el-table表格的使用
Element UI组件 Table 表格的用法很简单,腾讯云开发者手册有详细的介绍。表头的定义:<template><el-table :data="tableData" class="data_table"><el-table-column prop="number" label="编号" width="180"></el...
·
Element UI组件 Table 表格的用法很简单,开发者手册有详细的介绍。
表头的定义:
<template>
<el-table :data="tableData" class="data_table">
<el-table-column prop="number" label="编号" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="info" label="描述">
</el-table-column>
</el-table>
</template>
其中,prop 属性对应对象中的键名,用来填充数据;label 属性定义表格的列名;width 属性定义表格的列宽。
填充数据:
data () {
return {
tableData: [{
number: '2016001',
name: '小明',
info: '这是第一条数据'
}, {
number: '2016002',
name: '小明',
info: '这是第二条数据'
}, {
number: '2016003',
name: '小明',
info: '这是第三条数据'
}, {
number: '2016004',
name: '小明',
info: '这是第四条数据'
}, {
number: '2016005',
name: '小明',
info: '这是第五条数据'
}]
}
}
页面效果:
这个表格是没有竖直方向的边框边框的,加个竖直方向的边框试试:
<template>
<el-table :data="tableData" border class="data_table">
<el-table-column prop="number" label="编号" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="info" label="描述">
</el-table-column>
</el-table>
</template>
Element UI组件Table表格在默认情况下没有竖直方向的边框,简单的border 属性,就可以给表格加上竖直方向的边框。
页面效果如下:
更多推荐
已为社区贡献24条内容
所有评论(0)