el-plus-powerful-table v1.5.0

1.5.0 20211019

• 文档优化
• 组件新增 语言配置 locale
• 新增自定义列头 headerSlotName。传送门
• 新增全局组件注入 locale 和 size

...
import en from 'element-plus/lib/locale/lang/en'
...
app.use(powerfulTable, {size: 'small', locale: en})

• 删除部分类型中 data 和 operateData 下的 size 。改为传递给组件的 props
• 删除 child。修改 filter 的类型从 array[object] 改为 array[object] || function。新增 render 渲染函数。将原 slot 类型下的slotName改为到 props 下传送门
• btn 类型下的 showBtn 类型从 function 改为 boolean || function传送门
• switch 和 input 类型下的 disabled 类型从 boolean 改为 boolean || function。switch 类型下 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-input 的 rows

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 类型下 disabled 为 true 时 还是可以点击
• 新增 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
• 2. 自定义方法 新增 query、success、add 删除 look
• 文档新增示例

1.2.9 20210501

• 新增 tag 传送门
• tag 支持筛选

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 表格组件

operateData 批量操作

如果表格有 header.props.type 为 input 的则需要先填写该行数据，在选中该行，否则会出现获取不到 input 的值

operates 批量操作下拉框数据

// 参数示例
const operateData = {
  value: 0,
  operates:[{
    label: '删除',
    value: 0
  }]
}

查看JSON参数

header 表格头部数据

props 单元格数据

// 假设有一个这样的数据
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值为 '1' 而数据中的值为 1 仍然可以匹配上
{
  label: '筛选',
  props:[{
    prop: 'name',
    filter:[{
      key: '1',
      value: '替换1'
    }]
  }]
}

data 类型数据

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

type == text （默认text）

{
    label: "类型", //显示的标题
    props: [
      {
        prop: "gender",
        customFilterFun(row){
          return '风和自由'
        }
      }
    ],
  },

type == image（图片）

//示例
{
  label: "图片", //显示的标题
  props: [
    {
      type: "image",
      prop: "imageUrl",
      data: {
        style: {
          width: "120px",
          height: "120px",
          borderRadius: "10px",
        },
        lazy: true,
        preview: true,
      },
    },
  ],
}

type == btn（操作按钮）

// 参数示例
{
    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（开关）

//示例
{
    label: "开关", //显示的标题
    overflowTooltip: false,
    props: [
      {
        prop: "switchVal",
        type: "switch",
        data: {
          inactiveText: "关闭",
          activeText: "开启",
          activeValue: 1,
          inactiveValue: 0
        },
      },
    ],
  }

type == input/textarea（输入框）

//示例
{
  label: "价格", //显示的标题
  props: [
    {
      prop: "price",
      type: "input",
      data: {
        slot: "prepend",
        symbol: "￥",
        style: { width: "100%" },
      },
    },
  ],
}

type == video（视频）

//示例
{
  label: "视频", //显示的标题
  props: [
    {
      prop: "videoUrl",
      type: "video",
      data: {
        cover: "",
        style: {
          width: "120px",
          height: "120px",
          borderRadius: "10px",
          border: "1px solid #ccc",
        },
      },
    },
  ],
}

type == iconfont（图标）

//示例
{
  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（超链接）

//示例
{
  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

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

Event