element-ui table动态表格

js

// 动态行,决定有多少行,并携带每行所有数据
materialList: [ 
    {
        name: "tom",
        date: "2000/02/02",
        address: "上海市普陀",
        data: { money: 100 },
    },
], 

// 动态列,决定有多少列,匹配每列名称和展示数据
dynamicColumList: [
    { label: "名称", prop: "name" },
    { label: "日期", prop: "date" },
    { label: "地址", prop: "address" },
    { label: "材料名称", matchProp: "materialName" },
],

html

<el-table
    :data="materialList"
    style="width: 100%"
>

    <el-table-column
        v-for="(item, index) of dynamicColumList"
        :key="index"
        :label="item.label"
        align="center"
    >
        <template slot-scope="scope">

            <template v-if="item.matchProp === 'materialName'">
                        {{ scope.row.data.money + '元' }}
            </template>
            <template v-else> {{ scope.row[item.prop] }} </template>

        </template>
    </el-table-column>


</el-table>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容