VUE elementUI 表头动态渲染的两种方法

效果：

<template>
    <div>
        <el-alert title="比较麻烦的写法" type="error"></el-alert>
 
        <el-table border style="width:300px;" :data="tabelData">
            <el-table-column
                v-for="column in columnList" :key="column.prop"
                :label="column.label"
                :prop="column.prop"
                :width="column.width"
                v-bind="column">
            </el-table-column>
        </el-table>
 
        <el-alert title="简便的写法" type="success"></el-alert>
        
        <el-table border style="width:300px;" :data="tabelData">
            <el-table-column
                v-for="column in columnList" :key="column.prop"
                v-bind="column">
            </el-table-column>
        </el-table>
    </div>
</template>复制

JS

<script>
export default {
    data(){
        return{
            columnList:[
                {
                    label:'姓名',
                    prop:'name',
                    width:80
                },
                {
                    label:'年龄',
                    prop:'name'
                }
            ],
            tabelData:[
                {
                    name:'张三',
                    age:20
                },{
                    name:'王五',
                    age:19
                },
                {
                    name:'李四',
                    age:18
                },
                {
                    name:'赵六',
                    age:17
                }
            ]
        }
    }
}
</script>复制