<template>
    <el-card shadow="never">
        <div slot="header" class="clearfix card-header">
            <div class="card-title">{{title}}</div>
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="listData.push({})"></el-button>
        </div>
        <el-table :data="listData" border>
            <el-table-column label="序号" width="90px">
                <template slot-scope="scope">
                    {{scope.$index + 1}}
                </template>
            </el-table-column>
            <template v-for="col in fields">
            <el-table-column :label="col.label" :key="col.field">
                <template slot-scope="{row}">
                    <component :is="col.tag || 'el-input'" v-model="row[col.field]" v-bind="col.attrs" />
                </template>
            </el-table-column>
            </template>
            <!-- <el-table-column label="职位">
                <template slot-scope="{row}">
                    <el-input v-model="row.job" />
                </template>
            </el-table-column> -->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.$index)"></el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>
<script>
/*
fields:
[
    {
        field: 'name',
        label: '字段名'
        tag: 'el-input',
        attr: {}
    }
]
*/
import FormComponents from './components/index.js'
export default {
    components: {...FormComponents},
    props:{
        title: String,
        fields: Array,
        value: Array
    },
    data(){
        return {
            listData: []
        }
    },
    watch:{
        listData(val){
            console.log('数据更新')
            this.$emit('input', val)
        },
        value(){
            this.listData = this.value
        }
    },
    methods:{
        del(index){
            this.$confirm('确定删除此行？')
                .then(res => {
                    this.listData.splice(index, 1)
                })
        }
    }
}
</script>
<style scoped lang="scss">
.card-header{
    display: flex;
    .card-title{
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 16px;
    }
}
</style>