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

vue-bxz-table

一、封裝element-ui的table組件：

1. 定義表格高度全屏
2. 增加前臺分頁功能。
3. 自定義表頭，循環輸出整體表結構。
4. 表格內編輯（輸入框和下拉選擇框）。
5. 表格內自定義按鈕和點擊事件。
6. 每一列增加過濾函數。
7. 可格式化數字
8. 可勾選多頁內的checkbox，同時保存或刪除，切換頁面後保留checkbox選中狀態。
9. 表格內編輯後，自動選中該行。
10. 父組件打印勾選的行。
11. 自定義排序函數，可按數字大小排序

二、碼雲地址：https://gitee.com/bxzxb/vue-b...

三、安裝教程

1. npm install、

四、使用說明

1. 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。

六、組件截圖