注意點：定義的columns一定要寫在data中，否則在加載過程中由于渲染順序會導致其中的渲染函數無法識別

渲染方法1：

指定渲染函數：

const columns = [ { title: ’排名’, dataIndex: ’key’, customRender: renderContent // 渲染函數的規則 }, { title: ’搜索關鍵詞’, dataIndex: ’keyword’, customRender: (text, row, index) => { if (index < 4) { // 前4行數據以a標簽的形式被渲染 return <a href='javascript:;' rel='external nofollow' rel='external nofollow' >{text}</a> } return { // 否則以獨占4列的文本形式被渲染 children: text, attrs: {colSpan: 4 } } } }]const renderContent = (value, row, index) => { const obj = { children: value, attrs: {} } return obj}

渲染方法2：

直接調用對應插槽模板：

<a-table :columns='columns' :dataSource='data' :pagination=’pagination’> <template slot='operation'> <a-select placeholder='選擇操作' @change='listHandleChange'> <a-select-option value='1'>項目進度</a-select-option> <a-select-option value='2'>質量管控</a-select-option> <a-select-option value='3'>運維監控</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: ’項目名稱’, dataIndex: ’name’, customRender: (text, row, index) => { return { children: <a href='javascript:;' rel='external nofollow' rel='external nofollow' >{text}</a>, attrs: {} } } }, { title: ’項目進度’, dataIndex: ’progress’, scopedSlots: { customRender: ’progress’ } // 模板中對應的slot-scope可以用來傳遞參數，其中第一個參數是當前字段對應的值progress，第二個參數是當前字段對應的所有值對象,即整個data[n] }, { title: ’操作’, dataIndex: ’operate’, scopedSlots: { customRender: ’operation’ } // 直接對應插槽名為operation的模板 }] const data = [ { key: 6, number: 6, name: ’雅典娜’, progress: ’88%’, progressstatus: 1 }]

補充知識：Ant design vue框架，table控件中customRow用法的一個坑

今天在寫代碼時，用到Ant design框架中的<a-table>控件，其中的一個需求是：點擊table中的一行，需要執行一些操作。因為沒有默認的行點擊事件，需要用到customRow來進行自定義。

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

<Table customRow={(record) => { return { props: { xxx... //屬性 }, on: { // 事件 click: (event) => {}, // 點擊行 dblclick: (event) => {}, contextmenu: (event) => {}, mouseenter: (event) => {}, // 鼠標移入行 mouseleave: (event) => {} }, }; )} customHeaderRow={(column) => { return { on: { click: () => {}, // 點擊表頭行 } }; )}/>

官方的這個寫法，應該是屬于lamada的語法，今天我在使用時，也是使用這種寫法。

如下：

methods:{ getDetailList(id){ //執行具體的操作 }, rowClick: (record, index) => ({ // 事件 on: { click: event => { // 點擊該行時要做的事情 console.log(’record’, record) console.log(’index’, index) console.log(’event’, event) this.getDetailList(record.id) //這一行會報錯，報未定義 } } }) }

在執行時，會報錯，如下：

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

不使用lamada表達式，則不會出現這樣的問題，修改后的rowClick方法如下：

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

可正常執行，并能正確調用getDetailList方法

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