vue-element-easy-table

• 基于 element-ui table 二次封装的简单表格

• 完全支持 element ui table 组件的所有属性

安装

npm i vue-element-easy-table

示例

// 在main.js 引入
import  EasyTable  from  "vue-element-easy-table";
Vue.use(
 EasyTable,
 /* 全局配置，element-ui table属性都可用 */ {
 // 表格属性
 tableAttrs: {
 border:  true,
 size:  "small",
 "header-row-class-name":  "className",
    },
 // 单元格属性
 tableColumnAttrs: {
 align:  "center",
 emptyPlaceholder:  "--",
 omit: {
 rows:  2,
 direction:  "top",
      },
    },
 // 分页属性
 paginationAttrs: {
 align:  "right",
    },
  }
);

<EasyTable
 row-id="id"
  :data="tableData"
  :tableOptions="tableOptions"
  :page.sync="page"
  :page-size.sync="size"
  :total="total"
  :checkbox-config="{fetchVal:  true, rowClick:  true}"
  :radio-config="{selectedVal:  selectedVal, fetchVal:  true, rowClick:  true}"
  @selected-change="select"
  @checked-change="handleChecked"
  @pagination="handleChangePage"
/>

export  default {
 name:  "App",
 components: {},
 data() {
 return {
 page:  1,
 size:  10,
 total:  1000,
 selectedVal: -1,
 tableData: [
        {
 id:  10,
 date:  "2016-05-02",
 name:  "王小虎",
 address:  "上海市普陀区金沙江路 1518 弄",
 type:  "1",
 img:  require("@/assets/images/avatar.jpg"),
 status:  1,
    draggable：false, // 不可拖拽
 info: {
 name:  'test',
 addr: {
 text:  '地址测试1111'
            }
          },
        },
        {
 id:  21,
 date:  "2016-05-04",
 name:  "王小虎",
 address:
 "上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄",
 type:  0,
 img:  require("@/assets/images/avatar.jpg"),
 status:  1,
        },
        {
 id:  33,
 date:  "2016-05-01",
 name:  "王小虎",
 address:  "上海市普陀区金沙江路 1519 弄",
 type:  false,
 img:  require("@/assets/images/avatar.jpg"),
 status:  2,
        },
        {
 id:  4,
 date:  "2016-05-03",
 name:  "王小虎",
 address:  "上海市普陀区金沙江路 1516 弄",
 type:  "上海市普陀区金沙江路 1516 上海市普陀区金沙江路 1516",
 img:  require("@/assets/images/avatar.jpg"),
 status:  0,
        },
      ],
    };
  },
 computed: {
 tableOptions() {
 return [
        {
 title:  "单选",
 type:  "radio",
    draggable：false, // 不可拖拽
        },
        {
 title:  "日期",
 prop:  "date",
 merge: [
            {
 title:  "名称",
 prop:  "name",
 merge: [
                {
 title:  "名称1",
 prop:  "name",
                },
                {
 title:  "地址",
 prop:  "address",
 returnVal: (value) => {
 return  `详细地址：${value}`;
                  },
                },
              ],
            },
            {
 title:  "地址",
 prop:  "address",
            },
          ],
        },
        {
 title:  "名称111",
 prop:  "type",
 renderHeader: () => {
 return (
              <span>
                <span>自定义表头</span>
                <sup>*</sup>
              </span>
            );
          },
          returnVal: (value, row) => {
            return `姓名: ${value}`;
          },
        },
        {
          title: "图片",
          render: (h, data) => {
            return (
              <div>
                <img style="width: 50px; height: 50px" src={data.img} />
              </div>
            );
          },
        },
        {
          title: "地址",
          prop: "address",
          omit: {
            effect: "light",
            rows: 2,
            direction: "top",
          },
        },
         {
          title: "地址（复杂数据类型）",
          prop: "info.addr.text",
          omit: {
            effect: "light",
            rows: 2,
            direction: "top",
          },
        },
        {
          title: "状态",
          prop: "status",
          enumType: [
            {
              value: 0,
              label: "未开始",
            },
            {
              value: 1,
              label: "已开始",
            },
            {
              value: 2,
              label: "进行中",
            },
          ],
        },
        {
          title: "状态2",
          prop: "status",
          enumType: {
            // 自定义枚举参数
            params: {
              value: "status",
              label: "text",
            },
            data: [
              {
                status: 0,
                text: "未开始",
              },
              {
                status: 1,
                text: "已开始",
              },
              {
                status: 2,
                text: "进行中",
              },
            ],
          },
        },
      ];
    },
  },
  methods: {
    handleChangePage({ page, size }) {
      console.log(page, size);
      console.log(this.page);
      console.log(this.size);
    },
    handleChecked(data) {
      console.log("radio");
      console.log(data);
    },
    select(data) {
      console.log("selected");
      console.log(data);
    },
  },
};

Table Global Attribute

Table Attribute

| 参数 | 说明 | 类型 | 可选 | 默认值 | | --------------- | -------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- | | loading | 加载 | boolean | — | | page | 当前页 | number | — | | pageSize | 每页数量 | number | — | | total | 数据总条数 | number | — | | row-id | 行数据的取值参数 | string | — | | tableOptions | 表格参数 | array | — | | checkbox-config | type=selection 配置参数：“fetchVal 直接取值，row-id 必须填写取值属性，rowClick 点击行” | object | {fetchVal: boolean, rowClick: boolean} | | radio-config | type=radio 配置参数：“selectedVal 默认选中，fetchVal 直接取值，row-id 必须填写取值属性，rowClick 点击行” | object | {selectedVal: selectedVal, fetchVal: boolean, rowClick: boolean} | | paginationAttrs | 绑定分页属性，可参考 element-ui Pagination 属性 | object | — | | columnDraggable | 列排序 | boolean | — | true | | lineDraggable | 行排序 | boolean | — | true | | headerWidthAdp| 表头宽度自适应 | boolean | — | false |

| extraColumnWidth| 额外列宽度（表头宽度自适应生效） | number | — | 0 |

TODO：如果需要针对某一项数据不可拖拽，在数据里面加上 draggable: false 即可

Table Options

Table Events

更新日志

2020 年 11 月 19 日

• 首次提交
• 新增空占位符

2020 年 11 月 27 日

• 新增数据枚举，自定义枚举参数

2020 年 11 月 28 日

• 新增自定义返回值

2020 年 12 月 01 日

• 修复 tableOptions 数据未响应

2020 年 12 月 02 日

• 解决 form 表单属性无法双向绑定
• 新增自定义表头（合并表头无法自定义）

2020 年 12 月 07 日

• 修复切换表格数据页面样式出错

2020 年 12 月 10 日

• 新增 N 行文字显示省略 & tips 显示

2020 年 12 月 17 日

• 修复 radio 单选返回值 undefined

2020 年 12 月 22 日

• 优化多行文字省略

2020 年 12 月 24 日

• 优化枚举数据
• 新增 slot-empty

2020 年 12 月 29 日

• 更新文档

2020 年 12 月 30 日

• 新增 render 渲染验证数据

2021 年 1 月 22 日

• pagination 切换页码、页数返回值

2021 年 4 月 15 日

• 修复分页全局 layout 无效

2021 年 9 月 7 日

• 修复单选框选择数据报错

2021 年 9 月 15 日

• 修复单选框设置默认值报错

2024 年 3 月 11 日

• 增加列、行拖拽排序

2024 年 8 月 2 日

• 更新文档

2024 年 12 月 20 日

• 新增复杂数据类型渲染
• 默认列宽度（优先级高于表头自适应宽度）
• 表头标题宽度自适应

2024 年 12 月 23 日

• 修复表格未出现滚动条情况下表头宽度自适应宽度不准确

2024 年 12 月 24 日

• 新增复杂数据类型针对render有效

2025 年 5 月 8 日

• 优化数据对象类型