一个通用的vue的表格组件

caoym 发布于2019-08-21 16:49 / 2309人阅读

摘要：在做业务组件的时候需要自己自己封装一个通用的表格，这个表格需要符合我们一切的好的幻想，左右固定，表头固定，分页，选择，一直表格内容的行数限制等等，下面就为大家介绍一下这一款表格组件功能以及怎么使用。

在做业务组件的时候需要自己自己封装一个通用的表格，这个表格需要符合我们一切的好的幻想，左右固定，表头固定，分页，选择，一直表格内容的行数限制等等，下面就为大家介绍一下这一款表格组件功能以及怎么使用。

先给大佬奉上demo

博客原文

install

npm install vue-table2

基本使用

    import vueTable from "vue-table2"
   
    
        
    
    
    /*
    const columns1 = [
    {
      title: "机构编号",
      key: "number",
      width: 85,
      textAlign: "left"
    },
    {
      title: "机构名称",
      key: "name",
      width: 292,
      textAlign: "left",
      textLine: 2,
      selectText: true
    },
    {
      title: "类型",
      key: "type",
      width: 180,
      textAlign: "center"
    },
    {
      title: "状态",
      key: "brand",
      width: 82,
      textAlign: "center"
    }
  ]
    */
    请看下面的说明

列的配置（columns）

名称	默认	是否必须	说明
title		是	表头标题
key		是	数据的 key 值
width		是	列的宽度以及最小宽度
textLine		否	指定那一列的单元格文子溢出显示省略号
textAlign	left	否	指定那一列的单元格文字的对齐方式left（左对齐） center（居中） right(右对齐)

表格组件的属性配置说明（table config）

名称	类型	默认	是否必须	说明
tdata	Array		是	渲染表格的数据
tcolumns	Array		是	表格列的配置
showSelect	Boolean	false	否	是否显示左侧选择框
showHandle	Boolean	false	否	是否显示右侧操作内容
titleHeight	Number	32	否	表头高度
tdHeight	Number	50	否	单元格高度
titleFixed	String	"auto"	否	表头是否固定，默认"auto"（不固定），"fixed"(固定),注意：表头固定需指定滚动内容（scrollHight）的高度
scrollHight	Numer	400	否	滚动内容的高度
selectFixed	Boolean	false	否	左侧是否固定
handleFixed	Boolean	false	否	右侧是否固定
page	Object		否	不配置这个 page 就不显示底部页码，配置的话{totalPage: 50,maxSize: 5} （totalPage)总页数 ,（maxSize）显示页数

事件相关

名称	是否必须	说明
clickItem	否	点击每一行时候触发的事件
changePage	否	页码改变时触发的事件
selectCheck	否	选择左边 chebox 时候触发的事件

slot 说明

操作的模板 slot

ps：如果觉得对你有用的话请点一个 start，你的支持我才是最大的动力
github: https://github.com/naihe138/vue-table

云服务器 GPU云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88773.html

行星工单系统部分实现(1)-流程控制

摘要：为使客服同学有序协同处理客户问题客服技术团队打造了多渠道整合的，可灵活配置的，便于流转的行星工单系统。所以根据这个处理思路，我们建立工单系统的流程控制方案。据此，我们用类管道函数实现了简单的流程控制。行为传参通过标志指定，仅能指定单行为。 1.工单系统的表格页工单系统是一种网络软件系统，根据不同组织，部门和外部客户的需求，来由针对的管理，维护和追踪一系列的问题和请求。大多用于记录、处...

lijy91 2019-08-23 12:25 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0