Table 一般多用于后台数据管理系统 , 用来展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。
当el-table
元素中注入data
对象数组后,在el-table-column
中用prop
属性来对应对象中的键名即可填入数据,用label
属性来定义表格的列名。可以使用width
属性来定义列宽。
通过 Scoped slot
可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据.
当然也可以放置按钮,input输入框.switch开关等等.
<!-- 放置table组件 -->
<el-table :data="roleList">
<!-- 放置列 -->
<el-table-column align="center" width="200" label="角色" prop="name" />
<el-table-column align="center" width="200" label="启用">
<!--template:在这是elm内置的作用域插槽,可以用来传值-->
<template slot-scope="scope">
{{ scope.row.state===1? '已启用':'未启用' }}
</template>
</el-table-column>
<el-table-column align="center" label="描述" prop="description" />
<el-table-column align="center" label="操作">
<!-- 放置操作按钮 -->
<template>
<el-button size="mini" type="text">分配权限</el-button>
<el-button size="mini" type="text">编辑</el-button>
<el-button size="mini" type="text">删除</el-button>
</template>
</el-table-column>
</el-table>
数据渲染如图:
常用属性如下:
label | 显示的标题 |
label | 对应列内容的字段名,也可以使用 property 属性 |
width | 对应列的宽度 |
align | 对齐方式 |
border | 是否带有纵向边框 |