ant design vue中表格指定格式渲染方式
注意點(diǎn):定義的columns一定要寫(xiě)在data中,否則在加載過(guò)程中由于渲染順序會(huì)導(dǎo)致其中的渲染函數(shù)無(wú)法識(shí)別
渲染方法1:
指定渲染函數(shù):
const columns = [ { title: ’排名’, dataIndex: ’key’, customRender: renderContent // 渲染函數(shù)的規(guī)則 }, { title: ’搜索關(guān)鍵詞’, dataIndex: ’keyword’, customRender: (text, row, index) => { if (index < 4) { // 前4行數(shù)據(jù)以a標(biāo)簽的形式被渲染 return <a href='javascript:;' rel='external nofollow' rel='external nofollow' >{text}</a> } return { // 否則以獨(dú)占4列的文本形式被渲染 children: text, attrs: {colSpan: 4 } } } }]const renderContent = (value, row, index) => { const obj = { children: value, attrs: {} } return obj}
渲染方法2:
直接調(diào)用對(duì)應(yīng)插槽模板:
<a-table :columns='columns' :dataSource='data' :pagination=’pagination’> <template slot='operation'> <a-select placeholder='選擇操作' @change='listHandleChange'> <a-select-option value='1'>項(xiàng)目進(jìn)度</a-select-option> <a-select-option value='2'>質(zhì)量管控</a-select-option> <a-select-option value='3'>運(yùn)維監(jiān)控</a-select-option> </a-select> </template> <template slot=’progress’ slot-scope='text,record'> <span>{{text}}</span> <span v-if=’record.progressstatus’><a-icon class=’arrow-up’ type='arrow-up' /> </span> <span v-if=’!record.progressstatus’><a-icon class=’arrow-down’ type='arrow-down' /></span> </template></a-table> const columns = [ { title: ’編號(hào)’, dataIndex: ’number’, customRender: renderContent }, { title: ’項(xiàng)目名稱’, dataIndex: ’name’, customRender: (text, row, index) => { return { children: <a href='javascript:;' rel='external nofollow' rel='external nofollow' >{text}</a>, attrs: {} } } }, { title: ’項(xiàng)目進(jìn)度’, dataIndex: ’progress’, scopedSlots: { customRender: ’progress’ } // 模板中對(duì)應(yīng)的slot-scope可以用來(lái)傳遞參數(shù),其中第一個(gè)參數(shù)是當(dāng)前字段對(duì)應(yīng)的值progress,第二個(gè)參數(shù)是當(dāng)前字段對(duì)應(yīng)的所有值對(duì)象,即整個(gè)data[n] }, { title: ’操作’, dataIndex: ’operate’, scopedSlots: { customRender: ’operation’ } // 直接對(duì)應(yīng)插槽名為operation的模板 }] const data = [ { key: 6, number: 6, name: ’雅典娜’, progress: ’88%’, progressstatus: 1 }]
補(bǔ)充知識(shí):Ant design vue框架,table控件中customRow用法的一個(gè)坑
今天在寫(xiě)代碼時(shí),用到Ant design框架中的<a-table>控件,其中的一個(gè)需求是:點(diǎn)擊table中的一行,需要執(zhí)行一些操作。因?yàn)闆](méi)有默認(rèn)的行點(diǎn)擊事件,需要用到customRow來(lái)進(jìn)行自定義。
這個(gè)方法,在官方的文檔中,有使用說(shuō)明,如下:
<Table customRow={(record) => { return { props: { xxx... //屬性 }, on: { // 事件 click: (event) => {}, // 點(diǎn)擊行 dblclick: (event) => {}, contextmenu: (event) => {}, mouseenter: (event) => {}, // 鼠標(biāo)移入行 mouseleave: (event) => {} }, }; )} customHeaderRow={(column) => { return { on: { click: () => {}, // 點(diǎn)擊表頭行 } }; )}/>
官方的這個(gè)寫(xiě)法,應(yīng)該是屬于lamada的語(yǔ)法,今天我在使用時(shí),也是使用這種寫(xiě)法。
如下:
methods:{ getDetailList(id){ //執(zhí)行具體的操作 }, rowClick: (record, index) => ({ // 事件 on: { click: event => { // 點(diǎn)擊該行時(shí)要做的事情 console.log(’record’, record) console.log(’index’, index) console.log(’event’, event) this.getDetailList(record.id) //這一行會(huì)報(bào)錯(cuò),報(bào)未定義 } } }) }
在執(zhí)行時(shí),會(huì)報(bào)錯(cuò),如下:
[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘getDetailList’ of undefined”。
不使用lamada表達(dá)式,則不會(huì)出現(xiàn)這樣的問(wèn)題,修改后的rowClick方法如下:
rowClick(record, index) { return { on: { click: () => { console.log(record, index) this.getDetailList(record.matbillid) } } } },
可正常執(zhí)行,并能正確調(diào)用getDetailList方法
以上這篇ant design vue中表格指定格式渲染方式就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. Python 實(shí)現(xiàn)勞拉游戲的實(shí)例代碼(四連環(huán)、重力四子棋)2. python 寫(xiě)函數(shù)在一定條件下需要調(diào)用自身時(shí)的寫(xiě)法說(shuō)明3. Java GZip 基于內(nèi)存實(shí)現(xiàn)壓縮和解壓的方法4. java獲取文件編碼,jsoup獲取html純文本操作5. SpringBoot+TestNG單元測(cè)試的實(shí)現(xiàn)6. 利用CSS制作3D動(dòng)畫(huà)7. 一款功能強(qiáng)大的markdown編輯器tui.editor使用示例詳解8. 存儲(chǔ)于xml中需要的HTML轉(zhuǎn)義代碼9. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能(保存目錄改進(jìn))10. .Net加密神器Eazfuscator.NET?2023.2?最新版使用教程
