table表格中使用插槽

效果图如下：

实现代码如下：

<template>
    <div class="table">
         <a-table :columns="columns" :data-source="datas">
             <div slot="precent" slot-scope="record">
                 <a-progress :percent="record.precent" size="small" />
             </div>
         </a-table>
     </div>
</template>
<script>
    export default {
        data() {
            return{
                datas : [
                {
                    key: '1',
                    province: '安徽',
                    num: 2567,
                    precent: 8.39,
                },
                {
                    key: '2',
                    province: '四川',
                    num: 3829,
                    precent: 7.42,
                },
                {
                    key: '3',
                    province: '广东',
                    num: 3333,
                    precent: 6.52,
                },
                {
                    key: '4',
                    province: '福建',
                    num: 1890,
                    precent: 5.33,
                },
                {
                    key: '5',
                    province: '江苏',
                    num: 2890,
                    precent: 4.28,
                },
                {
                    key: '6',
                    province: '湖北',
                    num: 1892,
                    precent: 6.29,
                },
            ],
            columns : [
                {
                    title: '省份',
                    dataIndex: 'province',
                    key: 'province',
                },
                {
                    title: '使用人数',
                    dataIndex: 'num',
                    key: 'num',
                    // width: 80,
                },
                {
                    title: '占比',
                    // dataIndex: 'precent',
                    key: 'precent',
                    ellipsis: true,
                    scopedSlots: { customRender: 'precent' },
                },
            ],
        }
    }
</script>

 组件嵌套组件使用插槽的方法实现