注意點(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)。