Neatly Packaged Magic

    el-plus-powerful-table

    1.5.0 • Public • Published

    1.5.0 20211019

    • 文档优化
    • 组件新增 语言配置 locale
    • 新增自定义列头 headerSlotName传送门
    • 新增全局组件注入 localesize
    ...
    import en from 'element-plus/lib/locale/lang/en'
    ...
    app.use(powerfulTable, {size: 'small', locale: en})
    • 删除部分类型中 dataoperateData 下的 size 。改为传递给组件的 props
    • 删除 child。修改 filter 的类型从 array[object] 改为 array[object] || function。新增 render 渲染函数。将原 slot 类型下的slotName改为到 props传送门
    • btn 类型下的 showBtn 类型从 function 改为 boolean || function传送门
    • switchinput 类型下的 disabled 类型从 boolean 改为 boolean || functionswitch 类型下 beforeFunction 新增参数传送门
    • text 类型下的 customFilterFun 改为自定义返回值。需返回一个 字符串 或者 数字
    • href 类型下的 prop已删除。text 类型从 string 改为 string || function传送门
    • 新增行点击事件 row-click

    1.4.15 20210901

    • 文档优化
    • tag 更改 color 字段类型为 function 传送门

    1.4.11 20210722

    • 文档优化
    • text 支持自定义过滤 字段 customFilterFun 传送门

    1.4.10 20210722

    • 解决 develop 点击一列的展开,其他列的都展开

    1.4.8 202106016

    • 新增 type = textarea。新增 type = textarea 类型下 rows 字段,同el-inputrows

    1.4.7 202106014

    • 新增 type = text 类型下 develop 字段,用于是否显示 “展开/收起 操作元素” 传送门

    1.3.10 20210601

    • 删除 type = btn 类型下 data 里的 condi 字段,改为 showBtn 字段,该字段是个函数类型 返回该行数据 传送门 showBtn

    1.3.9 20210531

    • 解决 选中是 异步加载的 选中数据 不能选中问题

    1.3.8 20210522

    • 解决 switch 类型下 disabledtrue 时 还是可以点击
    • 新增 switch 类型下 beforeFunction 字段 详见查看下方参数说明 传送门

    1.3.7 20210522

    • 解决 filter 没有数据 不显示默认空
    • 优化 text 类型下 长度过长时候使用...代替
    • text 类型 新增 line 字段,用于超出多少行使用...
    • tag 支持多个,支持只显示前number

    1.3.4 20210519

    • 解决 switch 类型下 text 不生效问题

    1.3.2 20210518

    • 修改 reserve 字段可传 HTML 标签
    • 没有数据情况下 默认 暂无数据
    • 修改文档文字说明错误

    1.3.1 20210502

    • 优化 批量操作、自定义操作按钮 返回数据从 context.emit('XXX',xx,xx)修改为context.emit('XXX',{xx,xx})
    • 修正 参数名称错误
      1. poprs 修改为 props,popr 修改为 prop
      1. 自定义方法 新增 query、success、add 删除 look
    • 文档新增示例

    1.2.9 20210501

    1.2.8 20210404

    • 新增 slot 使组件更灵活 详见查看下方参数说明 传送门
    • type == 'btn'data 新增 text 字段作为按钮文字显示 默认为 tip 字段文字

    1.2.7 20210325

    • type == 'text' 或者 type 不传时新增 reserve 字段作为替代 空数据
    • 图片预览 懒加载lazy、预览preview 默认true
    • 修复文档部分参数问题

    ===========================================================================

    el-plus-powerful-table

    主要功能:分页多选,批量操作

    vue3.0 的 element-plus 二次开发表格组件

    DEMO

    使用方法

    npm i el-plus-powerful-table
    //main.ts
    import ElementPlus from "element-plus";
    import powerfulTable from "el-plus-powerful-table";
    
    const app = createApp(App);
    app.use(powerfulTable);
    app.use(ElementPlus);
    app.mount("#app");
    
    //*.vue
    <powerful-table :list="list" :total="total" :header="header"></powerful-table>

    传送门

    过滤文本图片按钮开关输入框视频图标评分超链接插槽标签

    powerful-table Attributes 表格组件

    参数 说明 类型 可选值 默认值
    locale 组件语言 object<Language> - zhCn
    size 组件大小 string medium / small / mini small
    list 当前数据 array - -
    header 表格头部数据 array - -
    total 分页总条数 number - 0
    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.typeinput 的则需要先填写该行数据,在选中该行,否则会出现获取不到 input 的值

    参数 说明 类型 可选值 默认值
    value 下拉选中值 string - null
    type 按钮的类型 string default / 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
    fixed 固定列 string / boolean true / left / right false
    headerAlign 表头对齐方式 string left / center / right center
    headerSlotName 列头插槽 string - -
    props 单元格数据 array[object] - -

    props 单元格数据

    参数 说明 类型 可选值 默认值
    prop 数据 key 值 string - -
    child 当 prop 值是对象是用到 仅支持 type 为 text 已删除 string - -
    type 数据类型 string image / text / switch / btn / video / input / iconfont / tag / rate / href / slot text
    data 每个类型不一样 data 里值也不一样,
    type 为 btn 时数据类型为 array[object]
    object - -
    filter 过滤,只支持 type 为 text、tag array[object] / function(row,index) => string number -
    text 数据左侧显示的文字。(例:文字:数据) string - -
    reserve 当 prop 值 渲染数据为空时可用 reserve 代替空数据 可传 HTML 标签 string HTMLElement -
    render 渲染函数,此渲染函数优先级最高 function(h,row,index) - -
    style 包裹组件外面那一层 div 样式 object - -
    slotName 插槽名称 string - 'default'
    // 假设有一个这样的数据
    const data = [{
      my:{
        name: 'red'
      },
      myBrother: 'yellow'
    }]
    
    // 参数示例
    [
      {
      label: '我',
      props:[{
        type: 'text',
        text: '我的名字',
        prop: 'my',
        child: 'name',
        reserve: '<b>我只有在数据空时显示</b>',
        customFilterFun: (row, index) => {
          return row.my.name
        }
        filter:[{
          key: 'red',
          value: 'black'
        }]
      }]
    },
    {
      label: '我的兄弟',
      props:[{
        prop: 'myBrother',
      }]
    }
    ]

    filter 过滤

    参数 说明 类型 可选值 默认值
    key 单元格里的数据 string - -
    value 需要替换的值 string - -
    // 参数示例 内置替换是以 == 进行判断 所有 当key值为 '1' 而数据中的值为 1 仍然可以匹配上
    {
      label: '筛选',
      props:[{
        prop: 'name',
        filter:[{
          key: '1',
          value: '替换1'
        }]
      }]
    }

    data 类型数据

    //示例
    {
      type: 'image',
      prop:'image',
      data:{}
    }

    type == text (默认text)

    参数 说明 类型 可选值 默认值
    line 超出多少的行数使用...代替 number - 3
    develop 是否显示 “展开/收起 操作按钮” boolean false/true false
    customFilterFun 自定义当前单元格数据文本 (row)。 function(row,index) - -
    {
        label: "类型", //显示的标题
        props: [
          {
            prop: "gender",
            customFilterFun(row){
              return '风和自由'
            }
          }
        ],
      },

    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 - -
    text 按钮文字,不传默认提示文字 string - tip
    style 按钮样式 object - -
    icon 按钮上图标 string - -
    disabled 按钮是否禁用 boolean true/false false
    type 按钮类型 string primary / success / warning / danger / info / text primary
    showBtn 控制按钮显示隐藏 返回当前行数据 (row),返回 boolean boolean / function(row,index) - -
    emit 自定义方法名 string 'query', 'success', 'add', 'update', 'remove', 'occupyOne', 'occupyTwo' -
    // 参数示例
    {
        label: "操作", //显示的标题
        props: [
          {
            type: "btn",
            data: [
              {
                tip: "编辑",
                type: "info",
                icon: "el-icon-edit-outline",
                text: "U",
                emit: "update",
                showBtn: (row)=>{
                  return false
                }
              },
              {
                tip: "删除",
                type: "danger",
                text: "", //将不会显示按钮文字
                icon: "el-icon-delete",
                 showBtn: (row)=>{
                  return true
                }
                emit: "remove",
              },
            ],
          },
        ],
      }

    type == switch(开关)

    参数 说明 类型 可选值 默认值
    activeColor 打开时的背景色 string - -
    inactiveColor 关闭时的背景色 string - -
    inactiveText 关闭时的文字描述 string - -
    activeText 关闭时的文字描述 string - -
    activeValue 打开时的值 number - 1
    inactiveValue 关闭时的值 number - 0
    disabled 是否禁用 boolean / function(row) true/false false
    style 开关自定义样式 object - -
    beforeFunction 修改前事件,返回 true时正常执行 false 点击无变化,可以在此函数中自行处理 为false时提示 function(row,value,oldValue) - -
    //示例
    {
        label: "开关", //显示的标题
        overflowTooltip: false,
        props: [
          {
            prop: "switchVal",
            type: "switch",
            data: {
              inactiveText: "关闭",
              activeText: "开启",
              activeValue: 1,
              inactiveValue: 0
            },
          },
        ],
      }

    type == input/textarea(输入框)

    参数 说明 类型 可选值 默认值
    style 输入框样式 object - -
    placeholder 输入框文字描述 string - -
    disabled 输入框是否禁用,使用函数需要返回boolean boolean / function(row) true/false false
    slot 输入框前置或后置 string 'prepend' / 'append' -
    rows 显示的高度 textarea 专有 string / number - 3
    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
    //示例
    {
      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
    text 所显示的文本 string / function(row) - -
    prop 超链接文字该显示哪个 prop 的值 否则为 text 的值 已删除 string -
    //示例
    {
      label: "超链接", //显示的标题
      props: [
        {
          type: "href",
          prop: "href",
          data: {
            prop: 'name',
          },
        },
      ],
    }

    type == slot(插槽)

    //示例
    {
      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 背景颜色 返回颜色值 function(row,tag) - -
    hit 是否描边 boolean - false
    number 需要显示前多少个 number - 3
    filter 查看详情 array / function(row,index) - -

    //示例
    {
      label: "标签", //显示的标题
      props: [
        {
          prop: "tag",
          type: "tag",
          data: {
            effect: 'dark',
            // type: 'success'
          }
        },
      ],
    }

    Event

    方法名 说明 参数
    sizeChange 分页器切换 { pageNum , pageSize },selectArr(所有页中选中的数据)
    sortCustom 远程排序 column
    batchOperate 批量操作 {ids , selection , rows}
    自定义方法名 操作按钮 暂时只有 'query', 'success', 'add', 'update', 'remove', 'occupyOne', 'occupyTwo' {row , index }
    switchChange 开关组件操作 row
    row-click 行点击事件 {row, column, event}

    Install

    npm i el-plus-powerful-table

    DownloadsWeekly Downloads

    5

    Version

    1.5.0

    License

    MIT

    Unpacked Size

    62.9 kB

    Total Files

    4

    Last publish

    Collaborators

    • peng_xiao_shuai_0902