Element UI的Table用法

Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

¶基础表格

基

2016-05-02	王小虎	上海市普陀区金沙江路 1518 弄
2016-05-04	王小虎	上海市普陀区金沙江路 1517 弄
2016-05-01	王小虎	上海市普陀区金沙江路 1519 弄
2016-05-03	王小虎	上海市普陀区金沙江路 1516 弄

当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

 1 <template>
 2     <el-table
 3       :data="tableData"
 4       style="width: 100%">
 5       <el-table-column
 6         prop="date"
 7         label="日期"
 8         width="180">
 9       </el-table-column>
10       <el-table-column
11         prop="name"
12         label="姓名"
13         width="180">
14       </el-table-column>
15       <el-table-column
16         prop="address"
17         label="地址">
18       </el-table-column>
19     </el-table>
20   </template>
21
22   <script>
23     export default {
24       data() {
25         return {
26           tableData: [{
27             date: '2016-05-02',
28             name: '王小虎',
29             address: '上海市普陀区金沙江路 1518 弄'
30           }, {
31             date: '2016-05-04',
32             name: '王小虎',
33             address: '上海市普陀区金沙江路 1517 弄'
34           }, {
35             date: '2016-05-01',
36             name: '王小虎',
37             address: '上海市普陀区金沙江路 1519 弄'
38           }, {
39             date: '2016-05-03',
40             name: '王小虎',
41             address: '上海市普陀区金沙江路 1516 弄'
42           }]
43         }
44       }
45     }
46   </script>

纵向内容过多时，可选择固定表头：只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。

常用API：

data：显示的数据；

stripe：是否显示斑马纹；

max-height ：Table 的最大高度

height：Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。

border：是否带有纵向边框。

转载于:https://www.cnblogs.com/myfate/p/10572804.html

Element UI的Table用法相关推荐

Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
Element UI 的 table 单元格合并
项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 ...
Element UI 中table合并单元格
Element UI组件库合并table单元格函数封装 DOM: <el-table:data="tableData"size="mini"class=& ...
element ui 的table单元格合并
element ui中的table表格数据是动态生成的,如果说后台要求我们对单元格进行合并,这个时候需要借助一个api,:span-method="arraySpanMethod" ...
二次封装Element Ui的Table中使用render渲染函数
render函数的使用 render在element UI中的使用 render函数是什么具体参数用法 render在element UI中的使用 {prop: 'button',label: '操 ...
element ui中table合并相同内容单元格
一.遍历需要合并的集合,定义spanArr数组二.在table中增加事件三.调用objectSpanMethod方法,合并单元格
element UI中table操作栏更多按钮展示与折叠的实现
1.然后给大家看下动态图 2.解决思路: 一开始我的第一反应就是可以手写一个定位布局来点击弹出更多按钮弹框,后面看了下elementUI文档上有个组件可以利用,那就是Popover 弹出框废话不 ...
vue+element UI的 table组件实现日历
有现成的日历插件但是不符合需求,所以项目中使用vue+element 的表格组件自己实现一个日历组件核心js部分:此部分为计算的当月的日期且包含是否可选,是否节假日等等可操作的标记,这部分基本是实现 ...

Element UI的Table用法

Table 表格

¶基础表格

Element UI的Table用法相关推荐

最新文章

热门文章