网站生成器下载,网易企业邮箱怎么收费,广州做大型网站建设,wordpress站点相关用于展示多条结构类似的数据#xff0c;可对数据进行排序、筛选、对比或其他自定义操作。 Table组件比较常用#xff0c;常见于数据查询#xff0c;报表页面#xff0c;用来展示表格数据。 1.如何使用#xff1f; //当el-table元素中注入data对象数组后#xff0c;在el-t… 用于展示多条结构类似的数据可对数据进行排序、筛选、对比或其他自定义操作。 Table组件比较常用常见于数据查询报表页面用来展示表格数据。 1.如何使用 //当el-table元素中注入data对象数组后在el-table-column中用prop属性来对应对象中
//的键名即可填入数据用label属性来定义表格的列名。可以使用width属性来定义列宽。templateel-table:datatableDatastylewidth: 100%el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table/templatescriptexport 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 弄}]}}}/script
2.带斑马纹表格
使用带斑马纹的表格可以更容易区分出不同行的数据。
//stripe属性可以创建带斑马纹的表格。它接受一个Boolean默认为false设置为true即为启用。templateel-table:datatableDatastripestylewidth: 100%el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table
/templatescriptexport 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 弄}]}}}
/script
3.带边框表格
默认情况下Table 组件是不具有竖直方向的边框的如果需要可以使用border属性它接受一个Boolean设置为true即可启用。templateel-table:datatableDataborderstylewidth: 100%el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table
/templatescriptexport 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 弄}]}}}
/script
4.带状态表格
可将表格内容 highlight 显示方便区分「成功、信息、警告、危险」等内容。
//可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class表明该行处于某种状态。templateel-table:datatableDatastylewidth: 100%:row-class-nametableRowClassNameel-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table
/templatestyle.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}
/stylescriptexport default {methods: {tableRowClassName({row, rowIndex}) {if (rowIndex 1) {return warning-row;} else if (rowIndex 3) {return success-row;}return ;}},data() {return {tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}]}}}
/script
5.固定表头
纵向内容过多时可选择固定表头。
//只要在el-table元素中定义了height属性即可实现固定表头的表格而不需要额外的代码。templateel-table:datatableDataheight250borderstylewidth: 100%el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table
/templatescriptexport default {data() {return {tableData: [{date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-08,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-06,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-07,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}]}}}
/script6.固定列
横向内容过多时可选择固定列。
固定列需要使用fixed属性它接受 Boolean 值或者leftright表示左边固定还是右边固定。templateel-table:datatableDataborderstylewidth: 100%el-table-columnfixedpropdatelabel日期width150/el-table-columnel-table-columnpropnamelabel姓名width120/el-table-columnel-table-columnpropprovincelabel省份width120/el-table-columnel-table-columnpropcitylabel市区width120/el-table-columnel-table-columnpropaddresslabel地址width300/el-table-columnel-table-columnpropziplabel邮编width120/el-table-columnel-table-columnfixedrightlabel操作width100template slot-scopescopeel-button clickhandleClick(scope.row) typetext sizesmall查看/el-buttonel-button typetext sizesmall编辑/el-button/template/el-table-column/el-table
/templatescriptexport default {methods: {handleClick(row) {console.log(row);}},data() {return {tableData: [{date: 2016-05-02,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 1518 弄,zip: 200333}, {date: 2016-05-04,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 1517 弄,zip: 200333}, {date: 2016-05-01,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 1519 弄,zip: 200333}]}}}
/script
7.固定列和表头
横纵内容过多时可选择固定列和表头
固定列和表头可以同时使用只需要将上述两个属性分别设置好即可。templateel-table:datatableDatastylewidth: 100%height250el-table-columnfixedpropdatelabel日期width150/el-table-columnel-table-columnpropnamelabel姓名width120/el-table-columnel-table-columnpropprovincelabel省份width120/el-table-columnel-table-columnpropcitylabel市区width120/el-table-columnel-table-columnpropaddresslabel地址width300/el-table-columnel-table-columnpropziplabel邮编width120/el-table-column/el-table
/templatescriptexport default {data() {return {tableData: [{date: 2016-05-03,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 1518 弄,zip: 200333}, {date: 2016-05-08,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 1518 弄,zip: 200333}, {date: 2016-05-06,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 1518 弄,zip: 200333}, {date: 2016-05-07,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 1518 弄,zip: 200333}]}}}
/script
8.流体高度
当数据量动态变化时可以为 Table 设置一个最大高度。
//通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度则会显示一个滚动条。templateel-table:datatableDatastylewidth: 100%max-height250el-table-columnfixedpropdatelabel日期width150/el-table-columnel-table-columnpropnamelabel姓名width120/el-table-columnel-table-columnpropprovincelabel省份width120/el-table-columnel-table-columnpropcitylabel市区width120/el-table-columnel-table-columnpropaddresslabel地址width300/el-table-columnel-table-columnpropziplabel邮编width120/el-table-columnel-table-columnfixedrightlabel操作width120template slot-scopescopeel-buttonclick.native.preventdeleteRow(scope.$index, tableData)typetextsizesmall移除/el-button/template/el-table-column/el-table
/templatescriptexport default {methods: {deleteRow(index, rows) {rows.splice(index, 1);}},data() {return {tableData: [{date: 2016-05-03,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 1518 弄,zip: 200333}, {date: 2016-05-02,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 1518 弄,zip: 200333}, {date: 2016-05-04,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 1518 弄,zip: 200333}, {date: 2016-05-01,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 1518 弄,zip: 200333}]}}}
/script
9.多级表头
数据结构比较复杂的时候可使用多级表头来展现数据的层次关系。
只需要在 el-table-column 里面嵌套 el-table-column就可以实现多级表头。templateel-table:datatableDatastylewidth: 100%el-table-columnpropdatelabel日期width150/el-table-columnel-table-column label配送信息el-table-columnpropnamelabel姓名width120/el-table-columnel-table-column label地址el-table-columnpropprovincelabel省份width120/el-table-columnel-table-columnpropcitylabel市区width120/el-table-columnel-table-columnpropaddresslabel地址width300/el-table-columnel-table-columnpropziplabel邮编width120/el-table-column/el-table-column/el-table-column/el-table
/templatescriptexport default {data() {return {tableData: [{date: 2016-05-03,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 1518 弄,zip: 200333}, {date: 2016-05-02,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 1518 弄,zip: 200333}, {date: 2016-05-04,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 1518 弄,zip: 200333}, {date: 2016-05-01,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 1518 弄,zip: 200333}{date: 2016-05-07,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 1518 弄,zip: 200333}]}}}
/script 10.单选
选择单行数据时使用色块表示。
//Table 组件提供了单选的支持只需要配置highlight-current-row属性即可实现单选。
//之后由current-change事件来管理选中时触发的事件它会传入currentRowoldCurrentRow。
//如果需要显示索引可以增加一列el-table-column设置type属性为index即可显示从 1 开始的索引号。templateel-tablerefsingleTable:datatableDatahighlight-current-rowcurrent-changehandleCurrentChangestylewidth: 100%el-table-columntypeindexwidth50/el-table-columnel-table-columnpropertydatelabel日期width120/el-table-columnel-table-columnpropertynamelabel姓名width120/el-table-columnel-table-columnpropertyaddresslabel地址/el-table-column/el-tablediv stylemargin-top: 20pxel-button clicksetCurrent(tableData[1])选中第二行/el-buttonel-button clicksetCurrent()取消选择/el-button/div
/templatescriptexport default {data() {return {tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}],currentRow: null}},methods: {setCurrent(row) {this.$refs.singleTable.setCurrentRow(row);},handleCurrentChange(val) {this.currentRow val;}}}
/script
11.多选
选择多行数据时使用 Checkbox。
//实现多选非常简单: 手动添加一个el-table-column设type属性为selection即可
//默认情况下若内容过多会折行显示若需要单行显示可以使用show-overflow-tooltip属性
//它接受一个Boolean为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。templateel-tablerefmultipleTable:datatableDatatooltip-effectdarkstylewidth: 100%selection-changehandleSelectionChangeel-table-columntypeselectionwidth55/el-table-columnel-table-columnlabel日期width120template slot-scopescope{{ scope.row.date }}/template/el-table-columnel-table-columnpropnamelabel姓名width120/el-table-columnel-table-columnpropaddresslabel地址show-overflow-tooltip/el-table-column/el-tablediv stylemargin-top: 20pxel-button clicktoggleSelection([tableData[1], tableData[2]])切换第二、第三行的选中状态/el-buttonel-button clicktoggleSelection()取消选择/el-button/div
/templatescriptexport default {data() {return {tableData: [{date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-08,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-06,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-07,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}],multipleSelection: []}},methods: {toggleSelection(rows) {if (rows) {rows.forEach(row {this.$refs.multipleTable.toggleRowSelection(row);});} else {this.$refs.multipleTable.clearSelection();}},handleSelectionChange(val) {this.multipleSelection val;}}}
/script
12.排序
对表格进行排序可快速查找或对比数据。
//在列中设置sortable属性即可实现以该列为基准的排序接受一个Boolean默认为false。可以通过 //Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序需将sortable设置为custom同时在 Table 上监听sort-change事件在事件回调中可以获取当前排序的字段名和排序顺序从而向接口请求排序后的表格数据。在本例中我们还使用了formatter属性它用于格式化指定列的值接受一个Function会传入两个参数row和column可以根据自己的需求进行处理。templateel-table:datatableDatastylewidth: 100%:default-sort {prop: date, order: descending}el-table-columnpropdatelabel日期sortablewidth180/el-table-columnel-table-columnpropnamelabel姓名sortablewidth180/el-table-columnel-table-columnpropaddresslabel地址:formatterformatter/el-table-column/el-table
/templatescriptexport 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 弄}]}},methods: {formatter(row, column) {return row.address;}}}
/script 13.筛选
对表格进行筛选可快速查找到自己想看的数据。
//在列中设置filtersfilter-method属性即可开启该列的筛选filters 是一个数组filter-method是一个方法它用于决定某些数据是否显示会传入三个参数value, row 和 column。templateel-button clickresetDateFilter清除日期过滤器/el-buttonel-button clickclearFilter清除所有过滤器/el-buttonel-tablereffilterTable:datatableDatastylewidth: 100%el-table-columnpropdatelabel日期sortablewidth180column-keydate:filters[{text: 2016-05-01, value: 2016-05-01}, {text: 2016-05-02, value: 2016-05-02}, {text: 2016-05-03, value: 2016-05-03}, {text: 2016-05-04, value: 2016-05-04}]:filter-methodfilterHandler/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址:formatterformatter/el-table-columnel-table-columnproptaglabel标签width100:filters[{ text: 家, value: 家 }, { text: 公司, value: 公司 }]:filter-methodfilterTagfilter-placementbottom-endtemplate slot-scopescopeel-tag:typescope.row.tag 家 ? primary : successdisable-transitions{{scope.row.tag}}/el-tag/template/el-table-column/el-table
/templatescriptexport default {data() {return {tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,tag: 家}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄,tag: 公司}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄,tag: 家}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄,tag: 公司}]}},methods: {resetDateFilter() {this.$refs.filterTable.clearFilter(date);},clearFilter() {this.$refs.filterTable.clearFilter();},formatter(row, column) {return row.address;},filterTag(value, row) {return row.tag value;},filterHandler(value, row, column) {const property column[property];return row[property] value;}}}
/script
14.自定义列模板
自定义列的显示内容可组合其他组件使用。
//通过 Scoped slot 可以获取到 row, column, $index 和 storetable 内部的状态管理的数据用法参考 demo。templateel-table:datatableDatastylewidth: 100%el-table-columnlabel日期width180template slot-scopescopei classel-icon-time/ispan stylemargin-left: 10px{{ scope.row.date }}/span/template/el-table-columnel-table-columnlabel姓名width180template slot-scopescopeel-popover triggerhover placementtopp姓名: {{ scope.row.name }}/pp住址: {{ scope.row.address }}/pdiv slotreference classname-wrapperel-tag sizemedium{{ scope.row.name }}/el-tag/div/el-popover/template/el-table-columnel-table-column label操作template slot-scopescopeel-buttonsizeminiclickhandleEdit(scope.$index, scope.row)编辑/el-buttonel-buttonsizeminitypedangerclickhandleDelete(scope.$index, scope.row)删除/el-button/template/el-table-column/el-table
/templatescriptexport 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 弄}]}},methods: {handleEdit(index, row) {console.log(index, row);},handleDelete(index, row) {console.log(index, row);}}}
/script
15.展开行
当行内容过多并且不想显示横向滚动条时可以使用 Table 展开行功能。 //通过设置 typeexpand 和 Scoped slot 可以开启展开行功能el-table-column 的模板会被渲染成为展开行的内容展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。
templateel-table:datatableDatastylewidth: 100%el-table-column typeexpandtemplate slot-scopepropsel-form label-positionleft inline classdemo-table-expandel-form-item label商品名称span{{ props.row.name }}/span/el-form-itemel-form-item label所属店铺span{{ props.row.shop }}/span/el-form-itemel-form-item label商品 IDspan{{ props.row.id }}/span/el-form-itemel-form-item label店铺 IDspan{{ props.row.shopId }}/span/el-form-itemel-form-item label商品分类span{{ props.row.category }}/span/el-form-itemel-form-item label店铺地址span{{ props.row.address }}/span/el-form-itemel-form-item label商品描述span{{ props.row.desc }}/span/el-form-item/el-form/template/el-table-columnel-table-columnlabel商品 IDpropid/el-table-columnel-table-columnlabel商品名称propname/el-table-columnel-table-columnlabel描述propdesc/el-table-column/el-table
/templatestyle.demo-table-expand {font-size: 0;}.demo-table-expand label {width: 90px;color: #99a9bf;}.demo-table-expand .el-form-item {margin-right: 0;margin-bottom: 0;width: 50%;}
/stylescriptexport default {data() {return {tableData: [{id: 12987122,name: 好滋好味鸡蛋仔,category: 江浙小吃、小吃零食,desc: 荷兰优质淡奶奶香浓而不腻,address: 上海市普陀区真北路,shop: 王小虎夫妻店,shopId: 10333}, {id: 12987123,name: 好滋好味鸡蛋仔,category: 江浙小吃、小吃零食,desc: 荷兰优质淡奶奶香浓而不腻,address: 上海市普陀区真北路,shop: 王小虎夫妻店,shopId: 10333}, {id: 12987126,name: 好滋好味鸡蛋仔,category: 江浙小吃、小吃零食,desc: 荷兰优质淡奶奶香浓而不腻,address: 上海市普陀区真北路,shop: 王小虎夫妻店,shopId: 10333}]}}}
/script
16.树形数据与懒加载
//支持树类型的数据的显示。当 row 中包含 children 字段时被视为树形数据。渲染树形数据时必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。template
divel-table:datatableDatastylewidth: 100%;margin-bottom: 20px;row-keyidborderdefault-expand-all:tree-props{children: children, hasChildren: hasChildren}el-table-columnpropdatelabel日期sortablewidth180/el-table-columnel-table-columnpropnamelabel姓名sortablewidth180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-tableel-table:datatableData1stylewidth: 100%row-keyidborderlazy:loadload:tree-props{children: children, hasChildren: hasChildren}el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table
/div
/template
scriptexport default {data() {return {tableData: [{id: 1,date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {id: 2,date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {id: 3,date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄,children: [{id: 31,date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}, {id: 32,date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}]}, {id: 4,date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}],tableData1: [{id: 1,date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {id: 2,date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {id: 3,date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄,hasChildren: true}, {id: 4,date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}]}},methods: {load(tree, treeNode, resolve) {setTimeout(() {resolve([{id: 31,date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}, {id: 32,date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}])}, 1000)}},}
/script
17.自定义表头
表头支持自定义。
//通过设置 Scoped slot 来自定义表头。templateel-table:datatableData.filter(data !search || data.name.toLowerCase().includes(search.toLowerCase()))stylewidth: 100%el-table-columnlabelDatepropdate/el-table-columnel-table-columnlabelNamepropname/el-table-columnel-table-columnalignrighttemplate slotheader slot-scopescopeel-inputv-modelsearchsizeminiplaceholder输入关键字搜索//templatetemplate slot-scopescopeel-buttonsizeminiclickhandleEdit(scope.$index, scope.row)Edit/el-buttonel-buttonsizeminitypedangerclickhandleDelete(scope.$index, scope.row)Delete/el-button/template/el-table-column/el-table
/templatescriptexport 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 弄}],search: }},methods: {handleEdit(index, row) {console.log(index, row);},handleDelete(index, row) {console.log(index, row);}},}
/script
18. 表尾合计行
若表格展示的是各类数字可以在表尾显示各列的合计。
//将show-summary设置为true就会在表格尾部展示合计行。默认情况下对于合计行第一列不进行数据求合操作而是显示「合计」二字可通过sum-text配置其余列会将本列所有数值进行求合操作并显示出来。当然你也可以定义自己的合计逻辑。使用summary-method并传入一个方法返回一个数组这个数组中的各项就会显示在合计行的各列中具体可以参考本例中的第二个表格。
templateel-table:datatableDatabordershow-summarystylewidth: 100%el-table-columnpropidlabelIDwidth180/el-table-columnel-table-columnpropnamelabel姓名/el-table-columnel-table-columnpropamount1sortablelabel数值 1/el-table-columnel-table-columnpropamount2sortablelabel数值 2/el-table-columnel-table-columnpropamount3sortablelabel数值 3/el-table-column/el-tableel-table:datatableDataborderheight200:summary-methodgetSummariesshow-summarystylewidth: 100%; margin-top: 20pxel-table-columnpropidlabelIDwidth180/el-table-columnel-table-columnpropnamelabel姓名/el-table-columnel-table-columnpropamount1label数值 1元/el-table-columnel-table-columnpropamount2label数值 2元/el-table-columnel-table-columnpropamount3label数值 3元/el-table-column/el-table
/templatescriptexport default {data() {return {tableData: [{id: 12987122,name: 王小虎,amount1: 234,amount2: 3.2,amount3: 10}, {id: 12987123,name: 王小虎,amount1: 165,amount2: 4.43,amount3: 12}, {id: 12987124,name: 王小虎,amount1: 324,amount2: 1.9,amount3: 9}, {id: 12987125,name: 王小虎,amount1: 621,amount2: 2.2,amount3: 17}, {id: 12987126,name: 王小虎,amount1: 539,amount2: 4.1,amount3: 15}]};},methods: {getSummaries(param) {const { columns, data } param;const sums [];columns.forEach((column, index) {if (index 0) {sums[index] 总价;return;}const values data.map(item Number(item[column.property]));if (!values.every(value isNaN(value))) {sums[index] values.reduce((prev, curr) {const value Number(curr);if (!isNaN(value)) {return prev curr;} else {return prev;}}, 0);sums[index] 元;} else {sums[index] N/A;}});return sums;}}};
/script
19.合并行或列
多行或多列共用一个数据时可以合并行或列。 //通过给table传入span-method方法可以实现合并行或列方法的参数是一个对象里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组第一个元素代表rowspan第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。templatedivel-table:datatableData:span-methodarraySpanMethodborderstylewidth: 100%el-table-columnpropidlabelIDwidth180/el-table-columnel-table-columnpropnamelabel姓名/el-table-columnel-table-columnpropamount1sortablelabel数值 1/el-table-columnel-table-columnpropamount2sortablelabel数值 2/el-table-columnel-table-columnpropamount3sortablelabel数值 3/el-table-column/el-tableel-table:datatableData:span-methodobjectSpanMethodborderstylewidth: 100%; margin-top: 20pxel-table-columnpropidlabelIDwidth180/el-table-columnel-table-columnpropnamelabel姓名/el-table-columnel-table-columnpropamount1label数值 1元/el-table-columnel-table-columnpropamount2label数值 2元/el-table-columnel-table-columnpropamount3label数值 3元/el-table-column/el-table/div
/templatescriptexport default {data() {return {tableData: [{id: 12987122,name: 王小虎,amount1: 234,amount2: 3.2,amount3: 10}, {id: 12987123,name: 王小虎,amount1: 165,amount2: 4.43,amount3: 12}, {id: 12987124,name: 王小虎,amount1: 324,amount2: 1.9,amount3: 9}, {id: 12987125,name: 王小虎,amount1: 621,amount2: 2.2,amount3: 17}, {id: 12987126,name: 王小虎,amount1: 539,amount2: 4.1,amount3: 15}]};},methods: {arraySpanMethod({ row, column, rowIndex, columnIndex }) {if (rowIndex % 2 0) {if (columnIndex 0) {return [1, 2];} else if (columnIndex 1) {return [0, 0];}}},objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex 0) {if (rowIndex % 2 0) {return {rowspan: 2,colspan: 1};} else {return {rowspan: 0,colspan: 0};}}}}};
/script
20.自定义索引
自定义 typeindex 列的行号。
//通过给 typeindex 的列传入 index 属性可以自定义索引。该属性传入数字时将作为索引的起始值。也可以传入一个方法它提供当前行的行号从 0 开始作为参数返回值将作为索引展示。templateel-table:datatableDatastylewidth: 100%el-table-columntypeindex:indexindexMethod/el-table-columnel-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table
/templatescriptexport default {data() {return {tableData: [{date: 2016-05-02,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 1518 弄,zip: 200333,tag: 家}, {date: 2016-05-04,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 1517 弄,zip: 200333,tag: 公司}, {date: 2016-05-03,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 1516 弄,zip: 200333,tag: 公司}],}},methods: {indexMethod(index) {return index * 2;}}};
/script
