ant-design-vue 之简单表格自定义表头和内容

ant-design-vue 之简单表格自定义表头和内容

使用到的API

slots: { title: 'customnName' }  和  scopedSlots: { customRender: 'customAge' }

<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>

 

 Table 表格