首页 > 其他 > 详细

element ui table表格里面插槽的使用方法

时间:2021-05-24 22:24:55      阅读:204      评论:0      收藏:0      [点我收藏+]

1. 元素 

<el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="DATE">
    </el-table-column>
    <el-table-column label="ACCOUNT NUMBER">
        <template slot-scope="scope">  
            <p v-for="(item,index) in scope.row.number" :key="index" class="scopeItem">{{item}}</p>
        </template>
    </el-table-column>
    <el-table-column prop="name" label="NAME">
    </el-table-column>
    <el-table-column prop="email" label="EMAIL">
    </el-table-column>
    <el-table-column prop="type" label="ACCOUNT TYPE">
    </el-table-column>
    <el-table-column prop="platform" label="PLATFORM">
    </el-table-column>
    <el-table-column prop="currency" label="BASE CURRENCY">
    </el-table-column>
    <el-table-column prop="balance" label="ACCOUNT BALANCE">
    </el-table-column>
</el-table>

2. 数据

export default {
 
    data() {
 
        return {
 
            tableData: [{
                    date: "01/03/2018",
                    number: [‘042018‘, ‘042018‘, ‘042018‘, ‘042018‘],
                    name: "Danila Mega",
                    email: "danilamega@gmail.com",
                    type: "Standard STP",
                    platform: "MT5",
                    currency: "AUD",
                    balance: ‘$0‘
                },
                {
                    date: "04/03/2018",
                    number: [‘042018‘, ‘042018‘, ‘042018‘, ‘042018‘],
                    name: "Navin Shanmugarajan",
                    email: "navin.shan@gmail.com",
                    type: "RAW ECN",
                    platform: "MT4",
                    currency: "USD",
                    balance: ‘$0‘
                },
                {
                    date: "07/03/2018",
                    number: [‘042018‘, ‘042018‘, ‘042018‘, ‘042018‘],
                    name: "Alex Wu",
                    email: "alex.wu@vantagefx.com",
                    type: "Standard STP",
                    platform: "MT4",
                    currency: "AUS",
                    balance: ‘$0‘
                },
                {
                    date: "11/03/2018",
                    number: [‘042018‘, ‘042018‘, ‘042018‘, ‘042018‘],
                    name: "Austem Plumber",
                    email: "austem.plumber@vantagefx.com",
                    type: "Standard STP",
                    platform: "MT5",
                    currency: "CAD",
                    balance: ‘$0‘
 
                },
                {
                    date: "15/03/2018",
                    number: [‘042018‘, ‘042018‘, ‘042018‘, ‘042018‘],
                    name: "Rafael lobo",
                    email: "lobinho@hotmail.com",
                    type: "Standard STP",
                    platform: "MT4",
                    currency: "GBP",
                    balance: ‘$0‘
                }
            ]
        }
    }
}

 

 

参考---https://blog.csdn.net/weixin_39907729/article/details/88532949?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.baidujs&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.baidujs

element ui table表格里面插槽的使用方法

原文:https://www.cnblogs.com/pwindy/p/14805434.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!