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