注意點:定義的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:;">{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="選擇操作" style="width: 100%" @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:;">{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
}
]