zoukankan      html  css  js  c++  java
  • element ui table表格里面插槽的使用方法

    1. 元素 

    <el-table :data="tableData" style=" 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

  • 相关阅读:
    实验四 决策树
    实验三 朴素贝叶斯
    实验2 k近邻
    实验一
    实验三
    第二次实验
    实验一
    ATM取款系统
    流程图与活动图的区别与联系
    第一次随笔
  • 原文地址:https://www.cnblogs.com/pwindy/p/14805434.html
Copyright © 2011-2022 走看看