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>