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
属性来定义列宽。
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template> <script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
纵向内容过多时,可选择固定表头:只要在el-table
元素中定义了height
属性,即可实现固定表头的表格,而不需要额外的代码。
常用API:
data:显示的数据;
stripe:是否显示斑马纹;
max-height :Table 的最大高度
Element UI的Table用法的更多相关文章
- (Element UI 组件 Table)去除单元格底部的横线
Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...
- Element Ui中table实现表格编辑效果
主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...
- element ui 合计/table show-summary
在el-table 上面加上show-summary就可以对table的数据进行合计 但是上次出现了合计栏有的为空,有的合计不对的情况,如果出现的是空,那么说明你渲染的数据有undefine(即后台返 ...
- element ui里面table分页,页数从0开始的怎么做?
需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...
- 怎么样使element ui 的table某列变色
第一步.在el-table里面加上:row-style="rowClass" <el-table :data="targetCarList" border ...
- element ui的table的头部自定义
<el-table-column label="级别" min-width="120" prop="clueLevel" align= ...
- 普通element ui table组件的使用
1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...
- 封装一个优雅的element ui表格组件
现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...
- element UI 调整表格行高
使用element UI的table默认属性,绘制表格如下: 该表格的行高太大了,于是想调小一些. 查看官网的文档,table有几个属性, row-style:行的 style 的回调方法,也可以使用 ...
随机推荐
- zookeeper的选举机制
1)半数机制:集群中半数以上机器存活,集群可用.所以zookeeper适合装在奇数台机器上. 2)Zookeeper虽然在配置文件中并没有指定master和slave.但是,zookeeper工作时, ...
- TortoiseGit连接github.com
1.下载两个软件:msysgit,TortoiseGit 2.先安装msysgit,再安装TortoiseGit,安装过程保持默认即可. 3.为了安全,我们需要使ssh key.开始菜单--Torto ...
- 关于jsp web项目,jsp页面与servlet数据不同步的解决办法(报错404、405等)即访问.jsp和访问web.xml中注册的/servlet/的区别
报错信息: Type Status Report Message HTTP method GET is not supported by this URL Description The method ...
- C# 对象初始化器和集合初始化器
/// <summary>/// 图书类/// </summary>public class Book { /// <summary> /// 图书 ...
- 优动漫PAINT绘制紫阳花教程
紫阳花是插画.漫画很常见的绘画画材.这个教程非常好懂.而且很方便就能绘制出漂亮的效果.因为这种花一个月内能变化三种颜色,故而人们赋予它的花语是善变.背叛. 教程是简单,呃.... 没有优动漫PAINT ...
- requests 后续1
发送带数据post请求 import requests # 发送post请求 data = { } response = requests.post(url, data=data) # 内网 需要 认 ...
- Mojo For Chromium Developers
Overview This document contains the minimum amount of information needed for a developer to start us ...
- NodeJS学习笔记 (7)网络服务-http-client(ok)
原文:https://github.com/chyingp/nodejs-learning-guide 自己敲代码: ClientRequest概览 当你调用 http.request(options ...
- 【xsy2440】【GDOI2016】疯狂动物城
感受一下这恐怖的题目长度~~~ 其实题意很裸,但是作为GDOI的一道防AK题,自然有他优秀的地方. 简化题意:给出一棵树,要求支持三个操作: 1.修改点值 2.询问点$x$到$y$之间的一些东东 3. ...
- 紫书 例题8-12 UVa 12627 (找规律 + 递归)
紫书上有很明显的笔误, 公式写错了.g(k, i)的那个公式应该加上c(k-1)而不是c(k).如果加上c(k-1)那就是这一次 所有的红气球的数目, 肯定大于最下面i行的红气球数 我用的是f的公式, ...