vue封装element-ui的table组件,灵活配置表头实现表格内编辑，按钮，链接等功能。...

最新推荐文章于 2023-01-16 18:01:26 发布

weixin_34391445

最新推荐文章于 2023-01-16 18:01:26 发布

阅读量3.5k

点赞数

文章标签： javascript ui ViewUI

原文链接：https://segmentfault.com/a/1190000018051629

版权

本文介绍了如何封装一个Vue组件，基于Element-UI的Table，功能包括：全屏显示、前台分页、自定义表头、表格内编辑、自定义按钮、过滤函数、数字格式化、多页checkbox状态保留、行编辑后选中、自定义排序等。详细代码示例和安装教程可在码云查看。

摘要由CSDN通过智能技术生成

vue-bxz-table

一、封装element-ui的table组件：

定义表格高度全屏
增加前台分页功能。
自定义表头，循环输出整体表结构。
表格内编辑（输入框和下拉选择框）。
表格内自定义按钮和点击事件。
每一列增加过滤函数。
可格式化数字
可勾选多页内的checkbox，同时保存或删除，切换页面后保留checkbox选中状态。
表格内编辑后，自动选中该行。
父组件打印勾选的行。
自定义排序函数，可按数字大小排序

二、码云地址：https://gitee.com/bxzxb/vue-b...

三、安装教程

npm install、

四、使用说明

npm run dev

五、数据说明：

1.data格式：

 [
    {
      "bh": 1,
      "xmid": "5463562",
      "xmmc": "测试名称",
      "Nsrsbh": "325423523542352345",
      "dwmc": "测试单位名称",
      "yskze": "89787.66",
      "srze": "

最低0.47元/天解锁文章