資訊專欄INFORMATION COLUMN
摘要：一封裝的組件定義表格高度全屏增加前臺分頁功能。表格內(nèi)編輯后，自動選中該行。單元格內(nèi)數(shù)據(jù)樣式單元格內(nèi)按鈕，可多個。觸發(fā)組件綁定函數(shù)，參數(shù)按鈕名稱，按鈕樣式，按鈕事件標(biāo)識。單元格是否可點(diǎn)擊的判斷函數(shù)，可進(jìn)行復(fù)雜的函數(shù)判斷。
vue-bxz-table 一、封裝element-ui的table組件：
定義表格高度全屏
增加前臺分頁功能。
自定義表頭，循環(huán)輸出整體表結(jié)構(gòu)。
表格內(nèi)編輯（輸入框和下拉選擇框）。
表格內(nèi)自定義按鈕和點(diǎn)擊事件。
每一列增加過濾函數(shù)。
可格式化數(shù)字
可勾選多頁內(nèi)的checkbox，同時保存或刪除，切換頁面后保留checkbox選中狀態(tài)。
表格內(nèi)編輯后，自動選中該行。
父組件打印勾選的行。
自定義排序函數(shù)，可按數(shù)字大小排序
二、碼云地址：https://gitee.com/bxzxb/vue-b... 三、安裝教程npm install、
四、使用說明npm run dev
五、數(shù)據(jù)說明：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表頭數(shù)組格式：
[
{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:"唯一標(biāo)識",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表頭參數(shù)說明
name："表頭名稱"，
desc："字段名稱"，
width："單元格寬度",
click："單元格是否可點(diǎn)擊"，觸發(fā)組件綁定函數(shù) btnClickFunc，參數(shù){clickType:clickType,row:row}
url："點(diǎn)擊后跳轉(zhuǎn)的url"
sortable："是否可排序"，
format："金額是否格式化"，
fixed："固定列"，
edit："是否可編輯"，
editType："編輯類型",["inpput","select"]
editSelOptions："當(dāng)編輯類型是select時的初始數(shù)據(jù)"。
style："單元格內(nèi)數(shù)據(jù)樣式"
btns："單元格內(nèi)按鈕，可多個"。觸發(fā)組件綁定函數(shù) handleBtnClick，參數(shù)：{column:column,row:row,type:clickType}
name：按鈕名稱，btnType:按鈕樣式，clickType:按鈕事件標(biāo)識。
templet："單元格是否可點(diǎn)擊的判斷函數(shù)，可進(jìn)行復(fù)雜的函數(shù)判斷"。參數(shù)：本行數(shù)據(jù)row。
六、組件截圖
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108939.html
摘要：自從年月份對外公布以來，已經(jīng)經(jīng)過了個月的迭代，期間發(fā)布了幾十個正式版本，但一直沒有到，因為我們覺得是個里程碑版本，我們必須做的足夠完善才敢稱之為。 自從17年11月份對外公布以來，KPC已經(jīng)經(jīng)過了8個月的迭代，期間發(fā)布了幾十個正式版本，但一直沒有到1.0，因為我們覺得1.0是個里程碑版本，我們必須做的足夠完善才敢稱之為1.0。而如今我們有信心對外宣布：KPC 1.0終于來了！ 其實(shí)距離...
摘要：無效方案根據(jù)交易所小時成交量占比和實(shí)時價格加權(quán)計算得到渲染結(jié)果是一個包含了文字，同時有名為的，并無小圖標(biāo)，后邊中括號結(jié)構(gòu)里只能有一個有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性，即可實(shí)現(xiàn)固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實(shí)際應(yīng)用大多數(shù)是需要自適應(yīng)占滿父元素，超出滾動固定表頭的...
摘要：無效方案根據(jù)交易所小時成交量占比和實(shí)時價格加權(quán)計算得到渲染結(jié)果是一個包含了文字，同時有名為的，并無小圖標(biāo)，后邊中括號結(jié)構(gòu)里只能有一個有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性，即可實(shí)現(xiàn)固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實(shí)際應(yīng)用大多數(shù)是需要自適應(yīng)占滿父元素，超出滾動固定表頭的...
閱讀 3486·2023-04-26 02:48
閱讀 1475·2021-10-11 10:57
閱讀 2502·2021-09-23 11:35
閱讀 1209·2021-09-06 15:02
閱讀 3310·2019-08-30 15:54
閱讀 1626·2019-08-30 15:44
閱讀 893·2019-08-30 15:44
閱讀 1000·2019-08-30 12:52
