vue element-ui 动态生成 表头表格

代码

<template>
    <div class="tablecon">

        <el-table
            style="100%"
            stripe 
            border
            :data="tabledata">
            <el-table-column v-for="(item,index) in tableheader" :key="index"
                :property="item.type"
                :prop="item.type"
                :label="item.name"
                sortable
                align="center">
                <template slot-scope="scope">
                    <el-input v-if="item.type != 'sex'" v-model="scope.row[scope.column.property]" :placeholder="'请输入'+item.name"></el-input>
                    <span v-if="item.type == 'sex'" v-text="item.type == 'sex' ? scope.row[scope.column.property]==0? '男':'女' : scope.row[scope.column.property]"></span>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script>
export default {
    name:"dynamic",//不能有中文
    data(){
        return{
            tableheader:[
                {name:"名称",type:"name"},
                {name:"性别",type:"sex"},
                {name:"年龄",type:"age"}
            ],
            tabledata:[
                {name:"飞飞",sex:0,age:"18"},
                {name:"小明",sex:1,age:"28"},
                {name:"小强",sex:0,age:"38"}
            ]
        }
    }
}
</script>

<style scoped>
    .tablecon{
        width: 800px;
        margin: 50px auto;
        padding: 1px;
    }
</style>

效果图