<template>
<div>
<a-table bordered :columns="columns" :data-source="dataSource" :rowKey="(record,index)=>{return index}">
<span slot="customName" style="color: #ff6b81"><a-icon type="smile-o" /> 姓名</span>
<span slot="customAge" slot-scope="text, record" style="color: #ff6b81">
{{text}}_真实年龄
</span>
</a-table>
</div>
</template>
<script>
/* 这是ant-design-vue */
import Vue from 'vue'
import Antd, { message,Select } from 'ant-design-vue' //这是ant-design-vue
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd);
/* 这是ant-design-vue */
const columns = [
{dataIndex: 'name', key: 'name', slots: { title: 'customName' }},
{title: '年龄', dataIndex: 'age', key: 'age', scopedSlots: { customRender: 'customAge' }},
];
const dataSource = [
{key: '1', name: 'daFei', age: 32},
{key: '2', name: 'foo', age: 42},
{key: '3', name: 'bar', age: 32},
];
export default {
data() {
return {dataSource, columns,}
},
};
</script>
<style scoped>
</style>
Ant 之表格自定义表头和内容
最新推荐文章于 2024-06-06 13:55:58 发布