vue封裝element-ui的table組件,靈活配置表頭實現表格內編輯，按鈕，鏈接等功能。

henry14 發布于2019-08-26 13:30 / 3006人閱讀

摘要：一封裝的組件定義表格高度全屏增加前臺分頁功能。表格內編輯后，自動選中該行。單元格內數據樣式單元格內按鈕，可多個。觸發組件綁定函數，參數按鈕名稱，按鈕樣式，按鈕事件標識。單元格是否可點擊的判斷函數，可進行復雜的函數判斷。

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": "345345.35",
      "kcze": "56566.56",
      "zze": "345345",
      "zsfs_mc": "計算方式1",
      "xmxs": "在建項目"
    },
    {
      "bh": 1,
      "xmid": "5463562",
      "xmmc": "測試名稱",
      "Nsrsbh": "325423523542352345",
      "dwmc": "測試單位名稱",
      "yskze": "0.00",
      "srze": "345345.35",
      "kcze": "56566.56",
      "zze": "345345",
      "zsfs_mc": "計算方式1",
      "xmxs": "在建項目"
    }
 ]

2.columns表頭數組格式：

[
  {name:"",desc:"sel",width:"50",type:"selection"},
  {name:"編號",desc:"",width:"60",type:"index"},
  {name:"名稱",desc:"xmmc",tooltip:true},
  {name:"計算金額",desc:"yskze",width:"150",click:true,url:"/xmtz/xmtzYskje",templet:function(d){return d.yskze=="0.00"?true:false}},
  {name:"計算價款",desc:"srze",width:"150",click:true,sortable:true,url:"/xmtz/xmtzFwjsjk"},
  {name:"計算稅金",desc:"kcze",width:"150",style:"text-align:right;"},
  {name:"唯一標識",desc:"xmid",format:true,width:"150",edit:true,editType:"input",},
  {name:"計算方式",desc:"zsfs_mc",width:"150",edit:true,editType:"select",editSelOptions:[{label:"計算方式1",value:"計算方式1"},{label:"計算方式2",value:"計算方式2"}],style:"text-align:right;"},
  {name:"計算屬性",desc:"xmxs",width:"150",style:"color:#409EFF;text-align:center;text-decoration: underline;"},
  {name:"操作",desc:"jhqsnd",width:"200",btns:[{name:"查看詳情",btnType:"primary",clickType:"showXq"},{name:"編輯",btnType:"danger",clickType:"editXq"}]},
]

3.columns表頭參數說明

name："表頭名稱"，
desc："字段名稱"，
width："單元格寬度",
click："單元格是否可點擊"，觸發組件綁定函數 btnClickFunc，參數{clickType:clickType,row:row}
url："點擊后跳轉的url"
sortable："是否可排序"，
format："金額是否格式化"，
fixed："固定列"，
edit："是否可編輯"，
editType："編輯類型",["inpput","select"]
editSelOptions："當編輯類型是select時的初始數據"。
style："單元格內數據樣式"
btns："單元格內按鈕，可多個"。觸發組件綁定函數 handleBtnClick，參數：{column:column,row:row,type:clickType}
     name：按鈕名稱，btnType:按鈕樣式，clickType:按鈕事件標識。
templet："單元格是否可點擊的判斷函數，可進行復雜的函數判斷"。參數：本行數據row。

六、組件截圖

GPU云服務器云服務器 php實現表格可編輯 element-ui dialog組件要求阿里、騰訊等企業限期解除對鏈接的屏蔽表格固定表頭

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108939.html

支持多框架的組件庫KPC 1.0正式發布

摘要：自從年月份對外公布以來，已經經過了個月的迭代，期間發布了幾十個正式版本，但一直沒有到，因為我們覺得是個里程碑版本，我們必須做的足夠完善才敢稱之為。自從17年11月份對外公布以來，KPC已經經過了8個月的迭代，期間發布了幾十個正式版本，但一直沒有到1.0，因為我們覺得1.0是個里程碑版本，我們必須做的足夠完善才敢稱之為1.0。而如今我們有信心對外宣布：KPC 1.0終于來了！其實距離...

劉厚水 2019-08-26 10:10 評論0 收藏0
步步向前之Element-UI

摘要：無效方案根據交易所小時成交量占比和實時價格加權計算得到渲染結果是一個包含了文字，同時有名為的，并無小圖標，后邊中括號結構里只能有一個有待考證。 Table 固定表頭只要在el-table元素中定義了height屬性，即可實現固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實際應用大多數是需要自適應占滿父元素，超出滾動固定表頭的...

Imfan 2019-08-02 11:51 評論0 收藏0
步步向前之Element-UI

摘要：無效方案根據交易所小時成交量占比和實時價格加權計算得到渲染結果是一個包含了文字，同時有名為的，并無小圖標，后邊中括號結構里只能有一個有待考證。 Table 固定表頭只要在el-table元素中定義了height屬性，即可實現固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實際應用大多數是需要自適應占滿父元素，超出滾動固定表頭的...

ZoomQuiet 2019-08-29 17:08 評論0 收藏0