element ui 分页增删改查_记录Element UI实现简单的Table行编辑

(o゜▽゜)o☆ 青椒味的Hello World

没有项目工程，没有vue脚手架，就一个HTML页面；没有干货，纯画页面，没有后台，数据写死，堆了些简单的Element UI控件，实现了前端table的增删改查的点点点操作

1.界面展示

普普通通的界面和功能

2.Table本身

2.1 el-table的数据源

会绑定一个数据源data，data的格式是数组，所以之后在操作这个数组时，数组的下标(行索引)就比较重要了

:data="tableData"

tableData = [{

line: 1,

date: '2016-05-02',

name: '赫敏',

address: '上海市普陀区金沙江路 1518 弄',

age: 23,

num: 500,

str1: null,

str2: null,

str2laber: null,

str2dis: false,

str3: null,

str3laber: null,

str3dis: false,

str4: null

},

{

line: 2,

date: '2016-05-04',

name: '皮卡丘',

address: '上海市普陀区金沙江路 1517 弄',

age: 42,

num: 70000,

str1: null,

str2: 20,

str2laber: '我的貂蝉在哪里',

str2dis: true,

str3: null,

str3laber: null,

str3dis: false,

str4: null

}]

2.2 el-table的相关样式

一些基础的样式比如Table带边框，有斑马纹，固定表头，固定列，Table高度自适应，列宽按比例 这些都是Element UI自己就支持的，查一下官方的代码就知道怎么写

但是官方Table的行高，默认是比较高的，需要自己去调整CSS样式，这里主要是内边距属性值的调整

/* 合计行的样式(每个单元格的样式) */

.tabledata td {

padding: 0;

font-size: 13px;

}

/* 设置表头样式 */

.tabledata .el-table__header th {

padding: 0;

background-color: #F5F7FA;

}

2.3 el-table的合计

在el-table标签中加入 show-summary 即可实现合计；使用 :summary-method="getSummaries" 让其返回一个数组，这个数组中的各项就会显示在合计行的各列中，就可以实现自定义的合计；当然我这里的合计显示还是有bug的，比如日期列也会合计，但是我不想调了

用到的JS函数的说明(摘自菜鸟教程)：

map() 函数返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

Number() 函数把对象的值转换为数字。如果对象的值无法转换为数字，那么返回 NaN。

every() 函数用于检测数组所有元素是否都符合指定条件。

isNaN() 函数用于检查其参数是否是非数字值。

reduce() 函数接收一个函数作为累加器，数组中的每个值(从左到右)开始缩减，最终计算为一个值。

getSummaries方法的参数param如图所示

// 合计 /代码中注释的代码 因为不兼容IE浏览器ÿ