注意點(diǎn)：定義的columns一定要寫在data中，否則在加載過程中由于渲染順序會導(dǎo)致其中的渲染函數(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)用對應(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: ’編號’, 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’ } // 模板中對應(yīng)的slot-scope可以用來傳遞參數(shù)，其中第一個(gè)參數(shù)是當(dāng)前字段對應(yīng)的值progress，第二個(gè)參數(shù)是當(dāng)前字段對應(yīng)的所有值對象,即整個(gè)data[n] }, { title: ’操作’, dataIndex: ’operate’, scopedSlots: { customRender: ’operation’ } // 直接對應(yīng)插槽名為operation的模板 }] const data = [ { key: 6, number: 6, name: ’雅典娜’, progress: ’88%’, progressstatus: 1 }]

補(bǔ)充知識：Ant design vue框架，table控件中customRow用法的一個(gè)坑

今天在寫代碼時(shí)，用到Ant design框架中的<a-table>控件，其中的一個(gè)需求是：點(diǎn)擊table中的一行，需要執(zhí)行一些操作。因?yàn)闆]有默認(rèn)的行點(diǎn)擊事件，需要用到customRow來進(jìn)行自定義。

這個(gè)方法，在官方的文檔中，有使用說明，如下：

<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è)寫法，應(yīng)該是屬于lamada的語法，今天我在使用時(shí)，也是使用這種寫法。

如下：

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) //這一行會報(bào)錯(cuò)，報(bào)未定義 } } }) }

在執(zhí)行時(shí)，會報(bào)錯(cuò)，如下：

[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘getDetailList’ of undefined”。

不使用lamada表達(dá)式，則不會出現(xiàn)這樣的問題，修改后的rowClick方法如下：

rowClick(record, index) { return { on: { click: () => { console.log(record, index) this.getDetailList(record.matbillid) } } } },

可正常執(zhí)行，并能正確調(diào)用getDetailList方法

以上這篇ant design vue中表格指定格式渲染方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。