el-powerful-table
主要功能:分页多选,批量操作
vue2.0 的 element-ui 二次开发表格组件
使用方法
npm i el-powerful-table
//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 | 批量操作下拉框数据 | arrayobject | - | - |
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 | 单元格数据 | arrayobject | - | - |
props 单元格数据
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
prop | 数据 key 值 | string | - | - |
child | 当 prop 值是对象是用到 仅支持 type 为 text | string | - | - |
type | 数据类型 | string | image / text / switch / btn / video / input | text |
data | 每个类型不一样 data 里值也不一样, type 为 btn 时数据类型为 arrayobject | object | - | - |
filter | 过滤,只支持 type 为 text、tag | arrayobject | - | - |
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(评分)
//示例
{
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 |