# el-table-plus
背景：使用el-table时，总要书写过多的template模板代码，使得页面html代码过多。从应用层看element组件库，虽然api设计的十分灵活，但使用起来十分繁琐。所以需要对el-table进行包装，简化相关配置。
应用层api设计比较好的，推荐antd-design-vue table,el-table-plus api设计就参考了antd-design-vue table组件，底层渲染依然沿用element-ui table组件。同时全属性/事件支持原element table组件，不会破坏原有的api（无侵入）；同时支持slot/jsx/h函数三种方式自定义渲染列数据，实现自定义业务逻辑渲染；同时集成常用的pagination组件以及扩展api，帮助便捷处理常用业务。
# 特点
- 简单的使用方式，只需要data和column两个属性即可支持
- 全继承，element-ui全属性/事件继承
- 高扩展，支持slot/jsx/h函数三种方式自定义渲染列数据
- 更便捷，扩展scroll事件、pagination组件、fn快捷格式化
# 安装和引入
安装
yarn add @springleo/el-table-plus
引入
该组件依赖element-ui的el-table组件，需要自行引入。
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);
import ElTablePlus from '@springleo/el-table-plus'
Vue.use(ElTablePlus)
# 基本用法
data 和 columns 两个属性
<template>
<el-table-plus
:data="list"
:columns="columns"
/>
</template>
<script>
const listData = JSON.parse(
`{"code":200,"message":"success","data":[{"id":50745,"name":"rtBNhgqCDR","storage":8620,"member":{"id":50961,"userId":"51262","email":"Nu87YypnB@AK22e.rgu","projectRole":"Qa4ohl6qhT"},"mount":[{"mountType":"M8Rhh2Ntp6","mountName":"bFTDHyixr3","mountPath":"uwDTMtnbCW","userName":"nYIE5YoQve"},{"mountType":"8pUyKzNPjL","mountName":"TVaV7bjr1y","mountPath":"HoazVStmm5","userName":"nbGzaRjLjK"},{"mountType":"nD3hnojrY0","mountName":"vtJvtG05Jw","mountPath":"p5VWi1ptsi","userName":"8ERyVxGL3R"}],"gmtCreate":34327},{"id":51414,"name":"1A6ogTNZl1","storage":36580,"member":{"id":51767,"userId":"52603","email":"606UKO@AgasP.qmt","projectRole":"q8KkeQyD8f"},"mount":[{"mountType":"VG3JPYd4n5","mountName":"ijPznKZnUQ","mountPath":"SiQIq2ypee","userName":"rAhVP1UTUQ"},{"mountType":"B900pSNnAf","mountName":"MGFUwpuZq2","mountPath":"RQJOgsV806","userName":"acfdNaETLA"},{"mountType":"L81aEPhXWJ","mountName":"7hWszN6MpP","mountPath":"e99n7mLoHe","userName":"t2d5oVwRqV"}],"gmtCreate":78533},{"id":52659,"name":"srO0gfnHho","storage":46240,"member":{"id":52998,"userId":"53927","email":"M37YXor@949Y0.acq","projectRole":"2ikIgsSabL"},"mount":[{"mountType":"YjxjSNSyOv","mountName":"lRsFRwSWgc","mountPath":"Z1rMIGu0cR","userName":"CoUSbae92N"},{"mountType":"N716xNCa4q","mountName":"uxYPo7TGcG","mountPath":"pXyJpuZ1CX","userName":"oiubmGJ4dQ"},{"mountType":"r3PqYBkT9y","mountName":"Pp6B1yZXhi","mountPath":"SjbANI8SmS","userName":"9h8k3elmdM"}],"gmtCreate":98416}]}`
).data
export default {
data() {
return {
list: listData,
columns: [
{ label: 'ID', prop: 'id', width: '80px' },
{ label: '存储卷名', prop: 'name' },
{ label: '总容量', prop: 'storage' },
{ label: '邮箱', prop: 'member.email' },
{ label: '创建时间', prop: 'gmtCreate' }
]
};
}
};
</script>
# 属性事件全继承elementui
自动集成el-table 和el-table-column所有属性和事件。el-table属性包括stripe、border等；el-table-column属性包括fixed、align、show-overflow-tooltip等。
更多可看element官方属性和事件列表
<template>
<el-table-plus
:data="list"
:columns="columns"
@row-click="rowClickHandle"
@sort-change="sortChangeHandle"
stripe
border
/>
</template>
<script>
const listData = JSON.parse(
`{"code":200,"message":"success","data":[{"id":50745,"name":"rtBNhgqCDR","storage":8620,"member":{"id":50961,"userId":"51262","email":"Nu87YypnB@AK22e.rgu","projectRole":"Qa4ohl6qhT"},"mount":[{"mountType":"M8Rhh2Ntp6","mountName":"bFTDHyixr3","mountPath":"uwDTMtnbCW","userName":"nYIE5YoQve"},{"mountType":"8pUyKzNPjL","mountName":"TVaV7bjr1y","mountPath":"HoazVStmm5","userName":"nbGzaRjLjK"},{"mountType":"nD3hnojrY0","mountName":"vtJvtG05Jw","mountPath":"p5VWi1ptsi","userName":"8ERyVxGL3R"}],"gmtCreate":34327},{"id":51414,"name":"1A6ogTNZl1","storage":36580,"member":{"id":51767,"userId":"52603","email":"606UKO@AgasP.qmt","projectRole":"q8KkeQyD8f"},"mount":[{"mountType":"VG3JPYd4n5","mountName":"ijPznKZnUQ","mountPath":"SiQIq2ypee","userName":"rAhVP1UTUQ"},{"mountType":"B900pSNnAf","mountName":"MGFUwpuZq2","mountPath":"RQJOgsV806","userName":"acfdNaETLA"},{"mountType":"L81aEPhXWJ","mountName":"7hWszN6MpP","mountPath":"e99n7mLoHe","userName":"t2d5oVwRqV"}],"gmtCreate":78533},{"id":52659,"name":"srO0gfnHho","storage":46240,"member":{"id":52998,"userId":"53927","email":"M37YXor@949Y0.acq","projectRole":"2ikIgsSabL"},"mount":[{"mountType":"YjxjSNSyOv","mountName":"lRsFRwSWgc","mountPath":"Z1rMIGu0cR","userName":"CoUSbae92N"},{"mountType":"N716xNCa4q","mountName":"uxYPo7TGcG","mountPath":"pXyJpuZ1CX","userName":"oiubmGJ4dQ"},{"mountType":"r3PqYBkT9y","mountName":"Pp6B1yZXhi","mountPath":"SjbANI8SmS","userName":"9h8k3elmdM"}],"gmtCreate":98416}]}`
).data
export default {
data() {
return {
list: listData,
columns: [
{ label: 'ID', prop: 'id', width: '80px', fixed: 'left' },
{ label: '存储卷名', prop: 'name' },
{ label: '总容量', prop: 'storage' },
{ label: '邮箱', prop: 'member.email', 'show-overflow-tooltip': true },
{ label: '创建时间', prop: 'gmtCreate', align: 'right' }
]
};
},
methods: {
rowClickHandle(row, column, event) {
console.log(row, column, event)
},
sortChangeHandle(o) {
console.log(o)
},
}
};
</script>
# 格式化列
element-ui字段列中有 formatter - Function(row, column, cellValue, index) 属性支持格式化，这里el-table-plus兼容该写法。
同时为简便函数参数，同时提供fn - (cellValue, row, column, index)属性
<template>
<el-table-plus
:data="list"
:columns="columns"
/>
</template>
<script>
const listData = JSON.parse(
`{"code":200,"message":"success","data":[{"id":50745,"name":"rtBNhgqCDR","storage":8620,"member":{"id":50961,"userId":"51262","email":"Nu87YypnB@AK22e.rgu","projectRole":"Qa4ohl6qhT"},"mount":[{"mountType":"M8Rhh2Ntp6","mountName":"bFTDHyixr3","mountPath":"uwDTMtnbCW","userName":"nYIE5YoQve"},{"mountType":"8pUyKzNPjL","mountName":"TVaV7bjr1y","mountPath":"HoazVStmm5","userName":"nbGzaRjLjK"},{"mountType":"nD3hnojrY0","mountName":"vtJvtG05Jw","mountPath":"p5VWi1ptsi","userName":"8ERyVxGL3R"}],"gmtCreate":34327},{"id":51414,"name":"1A6ogTNZl1","storage":36580,"member":{"id":51767,"userId":"52603","email":"606UKO@AgasP.qmt","projectRole":"q8KkeQyD8f"},"mount":[{"mountType":"VG3JPYd4n5","mountName":"ijPznKZnUQ","mountPath":"SiQIq2ypee","userName":"rAhVP1UTUQ"},{"mountType":"B900pSNnAf","mountName":"MGFUwpuZq2","mountPath":"RQJOgsV806","userName":"acfdNaETLA"},{"mountType":"L81aEPhXWJ","mountName":"7hWszN6MpP","mountPath":"e99n7mLoHe","userName":"t2d5oVwRqV"}],"gmtCreate":78533},{"id":52659,"name":"srO0gfnHho","storage":46240,"member":{"id":52998,"userId":"53927","email":"M37YXor@949Y0.acq","projectRole":"2ikIgsSabL"},"mount":[{"mountType":"YjxjSNSyOv","mountName":"lRsFRwSWgc","mountPath":"Z1rMIGu0cR","userName":"CoUSbae92N"},{"mountType":"N716xNCa4q","mountName":"uxYPo7TGcG","mountPath":"pXyJpuZ1CX","userName":"oiubmGJ4dQ"},{"mountType":"r3PqYBkT9y","mountName":"Pp6B1yZXhi","mountPath":"SjbANI8SmS","userName":"9h8k3elmdM"}],"gmtCreate":98416}]}`
).data
export default {
data() {
return {
list: listData,
columns: [
{ label: 'ID', prop: 'id', width: '80px' },
{ label: '存储卷名', prop: 'name' },
{ label: '总容量', prop: 'storage', fn: val => `${val}G` },
{ label: '邮箱', prop: 'member.email' },
{ label: '创建时间', prop: 'gmtCreate' }
]
};
}
};
</script>
# 自定义列模板
支持jsx/slot/h函数三种方式的自定义渲染。
熟悉slot语法，可以在scopedSlots.customRender中设置slot名称，然后在template模板中书写slot。
熟悉jsx语法，可直接customRender函数中返回JSX（注意此时需要babel支持，vue-cli3自带），或者直接书写h函数创建最终VNode。
<template>
<el-table-plus
:data="list"
:columns="columns"
>
<template #handle="val, row">
<el-button size="small" type="primary" @click="detailHandle(row)">查看详情</el-button>
<el-button size="small" type="danger" @lick="this.delHandle(row)">删除</el-button>
</template>
</el-table-plus>
</template>
<script>
const listData = JSON.parse(
`{"code":200,"message":"success","data":[{"id":50745,"name":"rtBNhgqCDR","storage":8620,"member":{"id":50961,"userId":"51262","email":"Nu87YypnB@AK22e.rgu","projectRole":"Qa4ohl6qhT"},"mount":[{"mountType":"M8Rhh2Ntp6","mountName":"bFTDHyixr3","mountPath":"uwDTMtnbCW","userName":"nYIE5YoQve"},{"mountType":"8pUyKzNPjL","mountName":"TVaV7bjr1y","mountPath":"HoazVStmm5","userName":"nbGzaRjLjK"},{"mountType":"nD3hnojrY0","mountName":"vtJvtG05Jw","mountPath":"p5VWi1ptsi","userName":"8ERyVxGL3R"}],"gmtCreate":34327},{"id":51414,"name":"1A6ogTNZl1","storage":36580,"member":{"id":51767,"userId":"52603","email":"606UKO@AgasP.qmt","projectRole":"q8KkeQyD8f"},"mount":[{"mountType":"VG3JPYd4n5","mountName":"ijPznKZnUQ","mountPath":"SiQIq2ypee","userName":"rAhVP1UTUQ"},{"mountType":"B900pSNnAf","mountName":"MGFUwpuZq2","mountPath":"RQJOgsV806","userName":"acfdNaETLA"},{"mountType":"L81aEPhXWJ","mountName":"7hWszN6MpP","mountPath":"e99n7mLoHe","userName":"t2d5oVwRqV"}],"gmtCreate":78533},{"id":52659,"name":"srO0gfnHho","storage":46240,"member":{"id":52998,"userId":"53927","email":"M37YXor@949Y0.acq","projectRole":"2ikIgsSabL"},"mount":[{"mountType":"YjxjSNSyOv","mountName":"lRsFRwSWgc","mountPath":"Z1rMIGu0cR","userName":"CoUSbae92N"},{"mountType":"N716xNCa4q","mountName":"uxYPo7TGcG","mountPath":"pXyJpuZ1CX","userName":"oiubmGJ4dQ"},{"mountType":"r3PqYBkT9y","mountName":"Pp6B1yZXhi","mountPath":"SjbANI8SmS","userName":"9h8k3elmdM"}],"gmtCreate":98416}]}`
).data
export default {
data() {
return {
list: listData,
columns: [
{ label: 'ID', prop: 'id', width: '80px' },
{ label: '存储卷名', prop: 'name' },
{ label: '总容量', prop: 'storage', fn: val => `${val}G` },
{ label: '邮箱', prop: 'member.email' },
{ label: '创建时间', prop: 'gmtCreate' },
{ label: '操作', fixed: 'right', prop: 'handle', minWidth: '120px',
scopedSlots: { customRender: 'handle' },
// 同时customRender/customTitle支持JSX，返回VNode
// customRender: (val, row, column, index, h) => {
// return (<div>
// <el-button size="small" type="primary" onClick={() => this.detailHandle(row)}>查看详情</el-button>
// <el-button size="small" type="danger" onClick={() => this.delHandle(row)}>删除</el-button>
// </div>)
// }
}
]
};
},
methods: {
detailHandle({ name }) {
this.$message.success(`${name} 详情`);
},
delHandle({ name }) {
this.$message.error(`删除 ${name}`);
}
}
};
</script>
# 远程排序
使用sortable: 'custom',搭配sort-change事件，进行远程排序。
使用default-sort设置默认排序方向。
<template>
<el-table-plus
:data="list"
:columns="columns"
@sort-change="sortChangeHandle"
:default-sort = "{prop: 'storage', order: 'ascending'}"
/>
</template>
<script>
const listData = JSON.parse(
`{"code":200,"message":"success","data":[{"id":50745,"name":"rtBNhgqCDR","storage":8620,"member":{"id":50961,"userId":"51262","email":"Nu87YypnB@AK22e.rgu","projectRole":"Qa4ohl6qhT"},"mount":[{"mountType":"M8Rhh2Ntp6","mountName":"bFTDHyixr3","mountPath":"uwDTMtnbCW","userName":"nYIE5YoQve"},{"mountType":"8pUyKzNPjL","mountName":"TVaV7bjr1y","mountPath":"HoazVStmm5","userName":"nbGzaRjLjK"},{"mountType":"nD3hnojrY0","mountName":"vtJvtG05Jw","mountPath":"p5VWi1ptsi","userName":"8ERyVxGL3R"}],"gmtCreate":34327},{"id":51414,"name":"1A6ogTNZl1","storage":36580,"member":{"id":51767,"userId":"52603","email":"606UKO@AgasP.qmt","projectRole":"q8KkeQyD8f"},"mount":[{"mountType":"VG3JPYd4n5","mountName":"ijPznKZnUQ","mountPath":"SiQIq2ypee","userName":"rAhVP1UTUQ"},{"mountType":"B900pSNnAf","mountName":"MGFUwpuZq2","mountPath":"RQJOgsV806","userName":"acfdNaETLA"},{"mountType":"L81aEPhXWJ","mountName":"7hWszN6MpP","mountPath":"e99n7mLoHe","userName":"t2d5oVwRqV"}],"gmtCreate":78533},{"id":52659,"name":"srO0gfnHho","storage":46240,"member":{"id":52998,"userId":"53927","email":"M37YXor@949Y0.acq","projectRole":"2ikIgsSabL"},"mount":[{"mountType":"YjxjSNSyOv","mountName":"lRsFRwSWgc","mountPath":"Z1rMIGu0cR","userName":"CoUSbae92N"},{"mountType":"N716xNCa4q","mountName":"uxYPo7TGcG","mountPath":"pXyJpuZ1CX","userName":"oiubmGJ4dQ"},{"mountType":"r3PqYBkT9y","mountName":"Pp6B1yZXhi","mountPath":"SjbANI8SmS","userName":"9h8k3elmdM"}],"gmtCreate":98416}]}`
).data
export default {
data() {
return {
list: listData,
columns: [
{ label: 'ID', prop: 'id', width: '80px' },
{ label: '存储卷名', prop: 'name' },
{ label: '总容量', prop: 'storage', sortable: 'custom', 'sort-orders': ['ascending', 'descending'] },
{ label: '邮箱', prop: 'member.email' },
{ label: '创建时间', prop: 'gmtCreate' }
]
};
},
methods: {
sortChangeHandle(o) {
console.log(o)
},
}
};
</script>
# 展开行
当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。
<template>
<el-table-plus
:data="list"
:columns="columns"
/>
</template>
<script>
const listData = JSON.parse(
`{"code":200,"message":"success","data":[{"id":50745,"name":"rtBNhgqCDR","storage":8620,"member":{"id":50961,"userId":"51262","email":"Nu87YypnB@AK22e.rgu","projectRole":"Qa4ohl6qhT"},"mount":[{"mountType":"M8Rhh2Ntp6","mountName":"bFTDHyixr3","mountPath":"uwDTMtnbCW","userName":"nYIE5YoQve"},{"mountType":"8pUyKzNPjL","mountName":"TVaV7bjr1y","mountPath":"HoazVStmm5","userName":"nbGzaRjLjK"},{"mountType":"nD3hnojrY0","mountName":"vtJvtG05Jw","mountPath":"p5VWi1ptsi","userName":"8ERyVxGL3R"}],"gmtCreate":34327},{"id":51414,"name":"1A6ogTNZl1","storage":36580,"member":{"id":51767,"userId":"52603","email":"606UKO@AgasP.qmt","projectRole":"q8KkeQyD8f"},"mount":[{"mountType":"VG3JPYd4n5","mountName":"ijPznKZnUQ","mountPath":"SiQIq2ypee","userName":"rAhVP1UTUQ"},{"mountType":"B900pSNnAf","mountName":"MGFUwpuZq2","mountPath":"RQJOgsV806","userName":"acfdNaETLA"},{"mountType":"L81aEPhXWJ","mountName":"7hWszN6MpP","mountPath":"e99n7mLoHe","userName":"t2d5oVwRqV"}],"gmtCreate":78533},{"id":52659,"name":"srO0gfnHho","storage":46240,"member":{"id":52998,"userId":"53927","email":"M37YXor@949Y0.acq","projectRole":"2ikIgsSabL"},"mount":[{"mountType":"YjxjSNSyOv","mountName":"lRsFRwSWgc","mountPath":"Z1rMIGu0cR","userName":"CoUSbae92N"},{"mountType":"N716xNCa4q","mountName":"uxYPo7TGcG","mountPath":"pXyJpuZ1CX","userName":"oiubmGJ4dQ"},{"mountType":"r3PqYBkT9y","mountName":"Pp6B1yZXhi","mountPath":"SjbANI8SmS","userName":"9h8k3elmdM"}],"gmtCreate":98416}]}`
).data
export default {
data() {
return {
list: listData,
columns: [
{ label: '', type: 'expand', customRender: (val, row, column,index, h) => h('div', `${row.name}、${row.storage}`) },
{ label: 'ID', prop: 'id', width: '80px' },
{ label: '存储卷名', prop: 'name' },
{ label: '总容量', prop: 'storage' },
{ label: '邮箱', prop: 'member.email' },
{ label: '创建时间', prop: 'gmtCreate' }
]
};
}
};
</script>
# 自定义表头
跟element一致，支持自定义列的内容以及自定义表头的内容，分别对应customRender和customTitle。参数顺序和element一致，分别是 { row, column, $index }和 { column, $index }
<template>
<el-table-plus
:data="list"
:columns="columns"
>
<template #handle="text, row">
<el-button size="small" type="primary" @click="detailHandle(row)">查看详情</el-button>
<el-button size="small" type="danger" @lick="this.delHandle(row)">删除</el-button>
</template>
<template #handleTitle="column, index">
<el-input size="mini" placeholder="输入关键字搜索"/>
</template>
</el-table-plus>
</template>
<script>
const listData = JSON.parse(
`{"code":200,"message":"success","data":[{"id":50745,"name":"rtBNhgqCDR","storage":8620,"member":{"id":50961,"userId":"51262","email":"Nu87YypnB@AK22e.rgu","projectRole":"Qa4ohl6qhT"},"mount":[{"mountType":"M8Rhh2Ntp6","mountName":"bFTDHyixr3","mountPath":"uwDTMtnbCW","userName":"nYIE5YoQve"},{"mountType":"8pUyKzNPjL","mountName":"TVaV7bjr1y","mountPath":"HoazVStmm5","userName":"nbGzaRjLjK"},{"mountType":"nD3hnojrY0","mountName":"vtJvtG05Jw","mountPath":"p5VWi1ptsi","userName":"8ERyVxGL3R"}],"gmtCreate":34327},{"id":51414,"name":"1A6ogTNZl1","storage":36580,"member":{"id":51767,"userId":"52603","email":"606UKO@AgasP.qmt","projectRole":"q8KkeQyD8f"},"mount":[{"mountType":"VG3JPYd4n5","mountName":"ijPznKZnUQ","mountPath":"SiQIq2ypee","userName":"rAhVP1UTUQ"},{"mountType":"B900pSNnAf","mountName":"MGFUwpuZq2","mountPath":"RQJOgsV806","userName":"acfdNaETLA"},{"mountType":"L81aEPhXWJ","mountName":"7hWszN6MpP","mountPath":"e99n7mLoHe","userName":"t2d5oVwRqV"}],"gmtCreate":78533},{"id":52659,"name":"srO0gfnHho","storage":46240,"member":{"id":52998,"userId":"53927","email":"M37YXor@949Y0.acq","projectRole":"2ikIgsSabL"},"mount":[{"mountType":"YjxjSNSyOv","mountName":"lRsFRwSWgc","mountPath":"Z1rMIGu0cR","userName":"CoUSbae92N"},{"mountType":"N716xNCa4q","mountName":"uxYPo7TGcG","mountPath":"pXyJpuZ1CX","userName":"oiubmGJ4dQ"},{"mountType":"r3PqYBkT9y","mountName":"Pp6B1yZXhi","mountPath":"SjbANI8SmS","userName":"9h8k3elmdM"}],"gmtCreate":98416}]}`
).data
export default {
data() {
return {
list: listData,
columns: [
{ label: 'ID', prop: 'id', width: '80px' },
{ label: '存储卷名', prop: 'name' },
{ label: '总容量', prop: 'storage', fn: val => `${val}G` },
{ label: '邮箱', prop: 'member.email' },
{ label: '创建时间', prop: 'gmtCreate' },
{ label: '操作', fixed: 'right', prop: 'handle', minWidth: '120px',
scopedSlots: { customRender: 'handle', customTitle: 'handleTitle' },
}
]
};
},
methods: {
detailHandle({ name }) {
this.$message.success(`${name} 详情`);
},
delHandle({ name }) {
this.$message.error(`删除 ${name}`);
}
}
};
</script>
# scroll事件
<template>
<el-table-plus
:data="list"
:columns="columns"
height="250"
@scroll="scrollHandle"
/>
</template>
<script>
const listData = JSON.parse(
`{"code":200,"message":"success","data":[{"id":50745,"name":"rtBNhgqCDR","storage":8620,"member":{"id":50961,"userId":"51262","email":"Nu87YypnB@AK22e.rgu","projectRole":"Qa4ohl6qhT"},"mount":[{"mountType":"M8Rhh2Ntp6","mountName":"bFTDHyixr3","mountPath":"uwDTMtnbCW","userName":"nYIE5YoQve"},{"mountType":"8pUyKzNPjL","mountName":"TVaV7bjr1y","mountPath":"HoazVStmm5","userName":"nbGzaRjLjK"},{"mountType":"nD3hnojrY0","mountName":"vtJvtG05Jw","mountPath":"p5VWi1ptsi","userName":"8ERyVxGL3R"}],"gmtCreate":34327},{"id":51414,"name":"1A6ogTNZl1","storage":36580,"member":{"id":51767,"userId":"52603","email":"606UKO@AgasP.qmt","projectRole":"q8KkeQyD8f"},"mount":[{"mountType":"VG3JPYd4n5","mountName":"ijPznKZnUQ","mountPath":"SiQIq2ypee","userName":"rAhVP1UTUQ"},{"mountType":"B900pSNnAf","mountName":"MGFUwpuZq2","mountPath":"RQJOgsV806","userName":"acfdNaETLA"},{"mountType":"L81aEPhXWJ","mountName":"7hWszN6MpP","mountPath":"e99n7mLoHe","userName":"t2d5oVwRqV"}],"gmtCreate":78533},{"id":52659,"name":"srO0gfnHho","storage":46240,"member":{"id":52998,"userId":"53927","email":"M37YXor@949Y0.acq","projectRole":"2ikIgsSabL"},"mount":[{"mountType":"YjxjSNSyOv","mountName":"lRsFRwSWgc","mountPath":"Z1rMIGu0cR","userName":"CoUSbae92N"},{"mountType":"N716xNCa4q","mountName":"uxYPo7TGcG","mountPath":"pXyJpuZ1CX","userName":"oiubmGJ4dQ"},{"mountType":"r3PqYBkT9y","mountName":"Pp6B1yZXhi","mountPath":"SjbANI8SmS","userName":"9h8k3elmdM"}],"gmtCreate":98416}]}`
).data
export default {
data() {
return {
list: Array(5).fill(listData).reduce((arr, current) => [...arr, ...current], []),
columns: [
{ label: 'ID', prop: 'id', width: '80px' },
{ label: '存储卷名', prop: 'name' },
{ label: '总容量', prop: 'storage' },
{ label: '邮箱', prop: 'member.email' },
{ label: '创建时间', prop: 'gmtCreate' }
]
};
},
methods: {
scrollHandle(e) {
console.log(e)
}
}
};
</script>
# 集成pagination
分页器，参考配置项或 pagination文档，设为 false 时不展示和进行分页
<template>
<el-table-plus
:data="list"
:columns="columns"
:pagination="{layout:'prev, pager, next', background: true}"
:total="100"
@page-change="pageChangeHandle"
/>
</template>
<script>
const listData = JSON.parse(
`{"code":200,"message":"success","data":[{"id":50745,"name":"rtBNhgqCDR","storage":8620,"member":{"id":50961,"userId":"51262","email":"Nu87YypnB@AK22e.rgu","projectRole":"Qa4ohl6qhT"},"mount":[{"mountType":"M8Rhh2Ntp6","mountName":"bFTDHyixr3","mountPath":"uwDTMtnbCW","userName":"nYIE5YoQve"},{"mountType":"8pUyKzNPjL","mountName":"TVaV7bjr1y","mountPath":"HoazVStmm5","userName":"nbGzaRjLjK"},{"mountType":"nD3hnojrY0","mountName":"vtJvtG05Jw","mountPath":"p5VWi1ptsi","userName":"8ERyVxGL3R"}],"gmtCreate":34327},{"id":51414,"name":"1A6ogTNZl1","storage":36580,"member":{"id":51767,"userId":"52603","email":"606UKO@AgasP.qmt","projectRole":"q8KkeQyD8f"},"mount":[{"mountType":"VG3JPYd4n5","mountName":"ijPznKZnUQ","mountPath":"SiQIq2ypee","userName":"rAhVP1UTUQ"},{"mountType":"B900pSNnAf","mountName":"MGFUwpuZq2","mountPath":"RQJOgsV806","userName":"acfdNaETLA"},{"mountType":"L81aEPhXWJ","mountName":"7hWszN6MpP","mountPath":"e99n7mLoHe","userName":"t2d5oVwRqV"}],"gmtCreate":78533},{"id":52659,"name":"srO0gfnHho","storage":46240,"member":{"id":52998,"userId":"53927","email":"M37YXor@949Y0.acq","projectRole":"2ikIgsSabL"},"mount":[{"mountType":"YjxjSNSyOv","mountName":"lRsFRwSWgc","mountPath":"Z1rMIGu0cR","userName":"CoUSbae92N"},{"mountType":"N716xNCa4q","mountName":"uxYPo7TGcG","mountPath":"pXyJpuZ1CX","userName":"oiubmGJ4dQ"},{"mountType":"r3PqYBkT9y","mountName":"Pp6B1yZXhi","mountPath":"SjbANI8SmS","userName":"9h8k3elmdM"}],"gmtCreate":98416}]}`
).data
export default {
data() {
return {
list: listData,
columns: [
{ label: 'ID', prop: 'id', width: '80px' },
{ label: '存储卷名', prop: 'name' },
{ label: '总容量', prop: 'storage' },
{ label: '邮箱', prop: 'member.email' },
{ label: '创建时间', prop: 'gmtCreate' }
]
};
},
methods: {
pageChangeHandle({ pageSize, currentPage }) {
console.log(pageSize, currentPage)
}
}
};
</script>
<style>
.el-pagination {
margin-top: 10px;
margin-left: -10px;
}
</style>
# API
# el-table-plus 属性
支持el-table上所有原有属性，同时扩展以下api。
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| loading | Boolean | false | 动效loading |
| data | Array | [] | 列表数据 |
| columns | Array | [] | column item配置列表，详细见如下columns Attrs |
| pagination | Object | 翻页器配置，默认未设置，不显示翻页器。相关api可查看el-pagination | |
| total | Number | 0 | 翻页器条数总数 |
# el-table-plus 事件
支持el-table上所有原有事件，同时扩展以下api。
| 事件名称 | 说明 | Description |
|---|---|---|
| scroll | table滚动条事件 | e |
| page-change | 翻页器改变事件 | { pageSize, currentPage } |
# columns 属性
支持el-table-column所有原有属性、Scoped Slot,同时扩展以下api：
| Attr | Type | Default | Description |
|---|---|---|---|
| label | String | 列名称 | |
| prop | String | 列数据字段，支持多层对象嵌套，如user.email.prefix | |
| fn | Function | 格式化列。函数参数(value, row, column, $index) | |
| hidden | Boolean | 是否隐藏该列。建议是一个computed，使得可以响应式显示隐藏 | |
| customRender | Function | 自定义列数据渲染。函数参数(value, row, column, $index, h)，支持jsx和h函数 | |
| customTitle | Function | 自定义列头部渲染。函数参数(column, $index, h)，支持jsx和h函数 | |
| scopedSlots | Object | 使用slot方式自定义渲染，替换customRender/customTitle函数。比如：{ customRender: 'slotName1', customTitle: 'slotName2' } |