一个通用的vue的表格组件

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

先给大佬奉上demo

博客原文

install

npm install vue-table2

基本使用

    import vueTable from 'vue-table2'
   
    <vue-table :tdata="tableData"
               :tcolumns="tableColumns"
               :showHandle="true"
               :tdHeight="40"
               v-on:clickItem="tableSelectItem">
        <template slot="operations" scope="scope">
            <span @click="edit(scope.item)">编辑</span>
            <span @click="edit(scope.item)">删除</span>
            <span @click="edit(scope.item)">禁用</span>
        </template>
    </vue-table>
    
    /*
    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指定那一列的单元格文子溢出显示省略号
textAlignleft指定那一列的单元格文字的对齐方式left(左对齐) center( 居中) right(右对齐)

表格组件的属性配置说明(table config)

名称类型默认是否必须说明
tdataArray渲染表格的数据
tcolumnsArray表格列的配置
showSelectBooleanfalse是否显示左侧选择框
showHandleBooleanfalse是否显示右侧操作内容
titleHeightNumber32表头高度
tdHeightNumber50单元格高度
titleFixedString‘auto’表头是否固定,默认’auto’(不固定),’fixed'(固定),注意:表头固定需指定滚动内容(scrollHight)的高度
scrollHightNumer400滚动内容的高度
selectFixedBooleanfalse左侧是否固定
handleFixedBooleanfalse右侧是否固定
pageObject不配置这个 page 就不显示 底部页码,配置的话{totalPage: 50,maxSize: 5} (totalPage)总页数 ,(maxSize)显示页数

事件相关

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

slot 说明

操作的模板 slot

    <template slot="operations" scope="scope">
        <span @click="edit(scope.item)">编辑</span>
        <span @click="edit(scope.item)">删除</span>
        <span @click="edit(scope.item)">禁用</span>
    </template>
    

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

    原文作者:naice
    原文地址: https://segmentfault.com/a/1190000011398490
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞