一個通用的vue的表格組件

caoym 發布于2019-08-21 16:49 / 2333人閱讀

摘要：在做業務組件的時候需要自己自己封裝一個通用的表格，這個表格需要符合我們一切的好的幻想，左右固定，表頭固定，分頁，選擇，一直表格內容的行數限制等等，下面就為大家介紹一下這一款表格組件功能以及怎么使用。

在做業務組件的時候需要自己自己封裝一個通用的表格，這個表格需要符合我們一切的好的幻想，左右固定，表頭固定，分頁，選擇，一直表格內容的行數限制等等，下面就為大家介紹一下這一款表格組件功能以及怎么使用。

先給大佬奉上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輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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