el-powerful-table
主要功能:分页多选,批量操作
vue2.0 的 element-ui 二次开发表格组件
使用方法
//main.ts
import Vue from 'vue'
import App from './App.vue'
import ElementUI from "element-ui";
import powerfulTable from "el-powerful-table";
Vue.use(ElementUI)
Vue.use(powerfulTable)
new Vue({
el: '#app',
render: h => h(App)
})
//*.vue
<powerful-table :list="list" :total="total" :header="header"></powerful-table>
powerful-table Attributes 表格组件
参数 |
说明 |
类型 |
可选值 |
默认值 |
list |
当前数据 |
array |
- |
- |
header |
表格头部数据 |
array |
- |
- |
total |
分页总条数 |
number |
- |
0 |
tableName |
表格名(用于缓存表格的分页) 已废弃 |
number |
- |
1 |
layout |
组件布局,子组件名用逗号分隔 |
string |
详情参考element 分页
|
total, sizes, prev, pager, next |
pageSizes |
每页显示个数选择器的选项设置 |
array |
- |
[10, 20, 30] |
selectData |
选中的数据 |
array |
- |
- |
selectCompare |
选中数据和列表数据相比较的参数[0]选中数据参数,[1]列表数据参数
|
array |
- |
['id','id'] |
isSelect |
是否显示多选 |
boolean |
false/true |
false |
isPagination |
是否显示分页器 |
boolean |
false/true |
false |
operateData |
批量操作 |
object |
- |
{} |
operateData 批量操作
如果表格有 header.props.type
为 input
的则需要先填写该行数据,在选中该行,否则会出现获取不到 input
的值
参数 |
说明 |
类型 |
可选值 |
默认值 |
value |
下拉选中值 |
string |
- |
null |
size |
按钮和下拉框大小 |
string |
medium / small / mini |
small |
type |
按钮的类型 |
string |
primary / success / warning / danger / info / text |
primary |
disabled |
禁用 |
boolean |
true / false |
false |
icon |
按钮上图标 |
string |
- |
- |
style |
按钮样式 |
object |
- |
- |
operates |
批量操作下拉框数据 |
array[object] |
- |
- |
operates 批量操作下拉框数据
参数 |
说明 |
类型 |
可选值 |
默认值 |
label |
批量操作下拉框显示文字 |
string |
- |
- |
value |
批量操作下拉框值 |
string |
- |
- |
// 参数示例
const operateData = {
value: 0,
operates:[{
label: '删除',
value: 0
}]
}
查看JSON参数
header 表格头部数据
参数 |
说明 |
类型 |
可选值 |
默认值 |
overflowTooltip |
当内容过长被隐藏时显示 |
boolean |
true / false |
false |
label |
显示的标题 |
string |
- |
- |
minWidth |
对应列的最小宽度 |
string |
- |
100 |
width |
对应列的宽度 |
string |
- |
- |
sortable |
排序 |
boolean / string |
'custom' / true / false |
false |
headerAlign |
表头对齐方式 |
string |
left / center / right |
center |
props |
单元格数据 |
array[object] |
- |
- |
props 单元格数据
参数 |
说明 |
类型 |
可选值 |
默认值 |
prop |
数据 key 值 |
string |
- |
- |
child |
当 prop 值是对象是用到 仅支持 type 为 text
|
string |
- |
- |
type |
数据类型 |
string |
image / text / switch / btn / video / input |
text |
data |
每个类型不一样 data 里值也不一样, type 为 btn 时数据类型为 array[object] |
object |
- |
- |
filter |
过滤,只支持 type 为 text、tag
|
array[object] |
- |
- |
text |
数据左侧显示的文字。(例:文字:数据) |
string |
- |
- |
reserve |
当 prop 值 渲染数据为空时可用 reserve 代替空数据 |
string |
- |
- |
style |
包裹组件外面那一层 div 样式 |
object |
- |
- |
// 假设有一个这样的数据
const data = {
my:{
name: 'red'
},
myBrother: 'yellow'
}
// 参数示例
[{
label: '我',
props:[{
type: 'text',
text: '我的名字',
prop: 'my',
child: 'name',
reserve: '我只有在数据空时显示',
filter:[{
key: 'red',
value: 'black'
}]
}]
},
{
label: '我的兄弟',
props:[{
prop: 'myBrother',
}]
}]
filter 过滤
参数 |
说明 |
类型 |
可选值 |
默认值 |
key |
单元格里的数据 |
string |
- |
- |
value |
需要替换的值 |
string |
- |
- |
// 参数示例
{
label: '筛选',
props:[{
prop: 'name',
filter:[{
key: '1',
value: '替换1'
}]
}]
}
data 类型数据
type != 'text' 的并且没有 data 情况下 都建议写上 data:{}
//示例
{
type: 'image',
prop:'image',
data:{}
}
type == image(图片)
参数 |
说明 |
类型 |
可选值 |
默认值 |
preview |
预览 |
boolean |
true/false |
true |
lazy |
懒加载 |
boolean |
true/false |
true |
zIndex |
图片预览层级 |
number |
- |
6000 |
style |
图片自定义样式 |
object |
- |
- |
fit |
图片如何适应容器框,同原生object-fit
|
string |
fill / contain / cover / none / scale-down |
- |
//示例
{
label: "图片", //显示的标题
props: [
{
type: "image",
prop: "imageUrl",
data: {
style: {
width: "120px",
height: "120px",
borderRadius: "10px",
},
lazy: true,
preview: true,
},
},
],
}
type == btn(操作按钮)
参数 |
说明 |
类型 |
可选值 |
默认值 |
tip |
提示文字 |
string |
- |
- |
style |
按钮样式 |
object |
- |
- |
icon |
按钮上图标 |
string |
- |
- |
disabled |
按钮是否禁用 |
boolean |
true/false |
false |
type |
按钮类型 |
string |
primary / success / warning / danger / info / text |
primary |
size |
按钮大小 |
string |
medium / small / mini |
small |
condi |
控制按钮显示隐藏 |
object |
- |
- |
emit |
自定义方法名 |
string |
- |
- |
// 参数示例
{
label: "操作", //显示的标题
props: [
{
type: "btn",
data: [
{
tip: "编辑",
type: "info",
icon: "el-icon-edit-outline",
text: "U",
emit: "update",
condi: {
// 此时 name == 1 时才会显示
prop: 'name',
value: '1'
}
},
{
tip: "删除",
type: "danger",
text: "D",
icon: "el-icon-delete",
emit: "remove",
},
],
},
],
}
condi(判断是否显示按钮)
参数 |
说明 |
类型 |
可选值 |
默认值 |
prop |
根据判断的 prop |
string |
- |
- |
value |
根据判断的 prop 的 value |
string / number |
- |
- |
type == switch(开关)
参数 |
说明 |
类型 |
可选值 |
默认值 |
activeColor |
打开时的背景色 |
string |
- |
- |
inactiveColor |
关闭时的背景色 |
string |
- |
- |
inactiveText |
关闭时的文字描述 |
string |
- |
- |
activeText |
关闭时的文字描述 |
string |
- |
- |
activeValue |
打开时的值 |
number |
- |
1 |
inactiveValue |
关闭时的值 |
number |
- |
0 |
disabled |
是否禁用 |
boolean |
true/false |
false |
style |
开关自定义样式 |
object |
- |
- |
//示例
{
label: "开关", //显示的标题
overflowTooltip: false,
props: [
{
prop: "switchVal",
type: "switch",
data: {
inactiveText: "关闭",
activeText: "开启",
activeValue: 1,
inactiveValue: 0
},
},
],
}
type == input(输入框)
参数 |
说明 |
类型 |
可选值 |
默认值 |
style |
输入框样式 |
object |
- |
- |
size |
输入框大小 |
string |
medium / small / mini |
small |
placeholder |
输入框文字描述 |
string |
- |
- |
disabled |
输入框是否禁用 |
boolean |
true/false |
false |
slot |
输入框前置或后置 |
string |
prepend / append |
- |
symbol |
slot 文字或者符合 |
string |
- |
- |
//示例
{
label: "价格", //显示的标题
props: [
{
prop: "price",
type: "input",
data: {
slot: "prepend",
symbol: "¥",
style: { width: "100%" },
},
},
],
}
type == video(视频)
参数 |
说明 |
类型 |
可选值 |
默认值 |
style |
视频样式 |
object |
- |
- |
poster |
封面 url 路径 |
string |
- |
- |
loop |
循环播放 |
boolean |
true/false |
false |
style |
图片自定义样式 |
object |
- |
- |
//示例
{
label: "视频", //显示的标题
props: [
{
prop: "videoUrl",
type: "video",
data: {
cover: "",
style: {
width: "120px",
height: "120px",
borderRadius: "10px",
border: "1px solid #ccc",
},
},
},
],
}
type == iconfont(图标)
参数 |
说明 |
类型 |
可选值 |
默认值 |
class |
样式类 |
array |
- |
- |
style |
图标自定义样式 |
object |
- |
- |
//示例
{
type: 'iconfont',
prop:'icon',
data:{
class: ['viteicon','vitestar'],
style: {
background: 'yellow'
}
}
}
type == rate(评分)
参数 |
说明 |
类型 |
可选值 |
默认值 |
max |
最大数值 |
number |
- |
5 |
style |
自定义样式 |
object |
- |
- |
colors |
颜色数组 |
array |
- |
['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
iconClass |
颜色数组 |
array |
- |
['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'] |
allowHalf |
是否允许半选 |
boolean |
true/false |
false |
showText |
是否显示辅助文字,若为真,则会从 texts 数组中选取当前分数对应的文字内容 |
boolean |
- |
false |
showScore |
是否显示当前分数,show-score 和 show-text 不能同时为真 |
boolean |
true/false |
false |
texts |
辅助文字数组 |
array |
- |
['极差', '失望', '一般', '满意', '惊喜'] |
//示例
{
label: "评分", //显示的标题
props: [
{
type: "rate",
prop: "rate",
data: {
allowHalf: true,
showText: true,
colors: ['red', 'yellow', 'green']
},
},
],
}
type == href(超链接)
参数 |
说明 |
类型 |
可选值 |
默认值 |
style |
自定义样式 |
object |
- |
- |
target |
跳转类型 |
string |
- |
'_blank' |
type |
主题类型 |
string |
- |
'primary' |
underline |
是否显示下划线 |
boolean |
true/false |
false |
prop |
超链接文字该显示哪个 prop 的值 否则为 text 的值 |
string |
- |
空 |
//示例
{
label: "超链接", //显示的标题
props: [
{
type: "href",
prop: "href",
data: {
prop: 'name',
},
},
],
}
type == slot(插槽)
参数 |
说明 |
类型 |
可选值 |
默认值 |
slotName |
插槽名称 |
string |
- |
'default' |
//示例
{
label: "slot(插槽)", //显示的标题
props: [
{
type: "slot",
slotName: "A",
},
],
}
//vue
<powerful-table>
<template #A="{ row,index }">
<div>
<el-image
style="width: 100px; border-radius: 10px"
:src="row.imageUrl"
></el-image>
</div>
</template>
</powerful-table>
type == tag
参数 |
说明 |
类型 |
可选值 |
默认值 |
type |
类型 |
string |
'primary / success / warning / danger / info' |
'primary' |
effect |
主题 |
string |
'dark / light / plain' |
'light' |
color |
背景颜色 |
string |
- |
- |
hit |
是否描边 |
boolean |
- |
false |
filter |
查看详情 |
array |
- |
- |
//示例
{
label: "标签", //显示的标题
props: [
{
prop: "tag",
type: "tag",
data: {
effect: 'dark',
// type: 'success'
}
},
],
}
Event
方法名 |
说明 |
参数 |
sizeChange |
分页器切换 |
{ pageNum , pageSize },selectArr(所有页中选中的数据) |
sortCustom |
远程排序 |
column |
batchOperate |
批量操作 |
{ids , selection , rows} |
自定义方法名 |
- |
{row , index } |
switchChange |
开关组件操作 |
row |