vue2-el-table
v1.1.7
Published
基于vue2.0和elementUI封装的table组件
Downloads
27
Readme
VUE elementUI table
安装:
npm i vue2-el-table
使用:
注意:本组件依赖如下包,如果没有请安装
elementUI
npm i element-ui -S
axios
npm install axios
sortablejs
npm install sortablejs --save
tableData绑定整个table所用数据,格式请查看下列文档
@eventAll返回整个组件回调,返回格式查看下列文档
<tables v-bind="tableData" @eventAll="tableEvent"/>
//此处可使用插糟,格式查看下列文档
</tables>
import tables from 'vue2-el-table'
components: {
tables
}
温馨提示:
如下依赖包已集成部份常用API,如需使用请安装
npm i vue-el-table-api
查看API详情 https://www.npmjs.com/package/vue-el-table-api
table数据结构:
组件控制参数:
tableData:{
如果都不需要配置borderParams,直接不写即可,如用只需配置所用到的功能即可,不用的直接不写
borderParams: {
operationStatus: true, // 是否显示操作列
border: false, // 表格是否显示边框
selection: true, // 多选 如果highlightCurrentRow为true,selection必为false
stripe: false, // 是否显示斑马线
highlightCurrentRow: false, // 单选 如果selection为true,highlightCurrentRow必为false
maxHeight: 'auto', // 设置最大高度
showSummary: false, // 是否合计
spanMethod: null, // 行合并还是列合并
index: false, // 是否显示序号
emptyText: '暂无数据', // 如数据为空的提示语
RowDrag: true, // 是否需要行拖拽
isPage: true // 是否显示分页组件 默认为false
isDefaultCheckAll: true // 是否默认全选所有数据
isShowdbTable: true // 是否显示上table勾选,下table显示 必须和selection同时为true
},
//当borderParams的isPage为true时添加如下配置(必填项以后可以不写),如果为false时,可以直接不写整个page
page: {
url: '/api/prsBuckle/showBalanceDetails', // 列表请求接口 必填
currentPage: 1, // 当前页 必填
pageSizes: [10, 20, 30, 40, 50, 100], // 页显示个数选择器 必填
pageSize: 10, // 页显示个数 必填
pageInfo: {}, // 分页传参 必填 初始值可为{}
method: 'post', // 默认为get
background: true // 是否带有背景色的分页 默认false
layout:"total, sizes, prev, pager, next, jumper" //默认为全部
},
/* 表头对象参数
1、title标题名 必填
2、value字段名 必填
3、width单元格宽度 '180'
4、align对齐方式[left,center,right] 默认center
5、fixed固定表格[left,center,right]
6、sortable是否排序[true, false, 'custom'] custom为后台排序
7、filters列条件查询 [{ text: '名称', value: '值' }] 值会对应表头的value
8、transitions 数据转换 [{ key: '100', value: '一百' }]
注:等同于使用管道过滤 如 if(params == '100') reutn '一百' else '无数据'
*/
tableTitle:[
{
title: '会员管理',
align: 'center',
value: 'memberManage',
children: [
{
title: '金额',
value: 'money',
width: '180',
align: 'center',
sortable: 'custom',
filters: [{ text: '金额100', value: '100' }, { text: '金额200', value: '200' }],
transitions: [
{ key: '100', value: '一百' },
{ key: '200', value: '二百' },
{ key: '300', value: '三百' },
{ key: '400', value: '四百' },
{ key: '500', value: '五百' }
]
}
]
},
],
//表格数据
tableData: []
}
组件回调说明:
tableEvent (eventSource) {
switch (eventSource.key) {
case 'selection': // 主table多选
console.log(eventSource.data)
break
case 'dbTableSelection': // borderParams.isShowdbTable为true时的dbTable多选
console.log(eventSource.data)
break
case 'getingData': // borderParams.isShowdbTable为true时点击下方提交,获取dbTable数据
console.log(eventSource.data)
break
case 'radioButton':// 主table单选
console.log(eventSource.data)
break
case 'sort':// 主table拖拽
console.log(eventSource.data)
break
case 'custom':// 主table后台排序
console.log(eventSource.data)
break
case 'init':// 此处一般用于分页返回数据进行覆盖table数据
console.log(eventSource.data)
break
}
}
注:page里,有一个请求,需要返回的数据结构如下,如果不符合即无法使用,或者使用组件代码方式来使用本组件
https://github.com/awfifnypm/vue-element-table/
数据状态码:res.data.code == 200 成功为200
列表数据总数量:res.data.total
插糟使用方式:
<tables v-bind="tables" @eventAll="tableEvent">
<!-- 注:目前只可能获取一级表头插槽,如果对二级以上表头数据,请参照下面例子 -->
<!-- 一级表头获取插槽使用方法 -->
<!-- <template #money> 把money改成对应的表头字段即可获取对应的插糟
<el-table-column
label="余额slot"
prop = "money"
align = "right"
width = "180"
>
</el-table-column>
</template> -->
<!-- 二级表头获取插槽使用方法,多级以此类推 -->
<template #yanshi>
<!--
此处设置el-table-column会覆盖table组件里默认el-table-column,
el-table-column操作比el-table官方组件最外层多了一个template
-->
<el-table-column
label="自定义列一演示"
align = "center"
width = "180"
>
<!--
如果下级数量过多,但又需要在页面操作,此处支持v-for遍历
一、template处改为 <template #yanshi="row">
二、使用row.children数据源遍历
三、通过索引找到要操作项,进行逻辑操作 可使用v-if v-else或其它
-->
<el-table-column
label="自定义列一"
prop = "column1"
align = "center"
width = "180"
>
<template slot-scope="scope">
{{scope.row.column1 + ' Hello'}}
</template>
</el-table-column>
</el-table-column>
</template>
<!-- 下面为操作列 operationStatus为true使用 -->
<template v-slot:operation="scope">
<el-button @click.native="delFuc(scope.row,scope.$index)">删除</el-button>
</template>
</tables>
如需自定义开发:
打开链接 https://github.com/awfifnypm/vue-element-table/
下载组件源码进行自定义修改使用
如需帮助请联系 vx:czl630964