基于el-table的自带分页、自动排序、带参查询、可以自定义列的表格组件
安装
$ npm install pagenation-table --save-dev
引入
import ElementUI from 'element-ui'
import pagenationTable from 'pagenation-table'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
Vue.use(pagenationTable)
基本用法
<template>
<pagenationTable :tableConf="tableConf"></pagenationTable>
</template>
<script>
export default {
data() {
return {
tableConf: {
url: "http://localhost:3000/api",
thead: [
{ type: "selection" },
{ label: "序号", type: "index", width: 60 },
{
label: "属性a",
prop: "aaa"
}
],
},
};
},
};
</script>
自定义列
<template>
<pagenationTable :tableConf="tableConf">
<template #slot_a="{row}">{{row.bbb}}</template>
</pagenationTable>
</template>
<script>
export default {
data() {
return {
tableConf: {
url: "http://localhost:3000/api",
thead: [
{ type: "selection" },
{ label: "序号", type: "index", width: 60 },
{
label: "属性a",
prop: "aaa",
},
{
label: "属性b",
slot: "slot_a",
},
],
},
};
},
};
</script>
Props
tableConf:
字段名 | 说明 | 类型 | 默认值 |
---|---|---|---|
url | 请求数据接口完整路径, 不传则不会调用接口 | 字符串 | '' |
thead | el-table-column Attributes都可以作为该对象的字段并传入组件中的el-table-column中 | 数组 | [] |
listKey | 后台接口返回的表格数据字段名 | string | 'list' |
totalKey | 后台接口返回的表格数据总数字段名 | string | 'totalCount' |
deleteEmptyKey | 如果传true就会删掉请求参数中值为空字符、undefined、null的字段,传false就不删 | 布尔 | true |
... | el-table Attributes都可以作为tableConf的字段并传入组件中的el-table中 |
v-model: 勾选中的数据列表, 类型为数组
searchFileds: 请求后台接口时附带的参数, 类型为对象
pageConf: 设置el-pagenation分页组件, 有默认值(一般情况下不需要传这个参数)
字段名 | 说明 | 类型 | 默认值 |
---|---|---|---|
current | 当前页 | int | 1 |
limits | 设置每页显示多少条数据 | 数组 | [10, 30, 50, 100, 200] |
limit | 每页显示条数 | int | 10 |
layout | 分页布局 | 字符串 | "sizes,total,prev,pager,next,jumper" |
total | 总的数据条数 | int | 0 |
Methods
方法名 | 说明 | 参数 |
---|---|---|
getElTable | 获取当前el-table实例, 可以通过返回值来调用el-table的所有方法 | 无 |
getList | 调用后台接口获取表格数据, 筛选数据时会用到这个方法, 返回一个promise, 可以拿到当前表格数据或空数组 | search = false, 传true会将当前页数重置成第一页 |