vue2.0动态数据表格

<template>

    <div>

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

            <!-- 序号 -->

            <el-table-column prop="date" align="center" label="序号" :resizable="false" type="index" width="50">

            </el-table-column>

            <!-- //  动态循环表头数据 -->

            <el-table-column :label="item.header" v-for="(item, index) in tableHead" :key="index" align="center">

                <template scope="scope">

                    <span>{{ scope.row[item.key] }}</span>

                </template>

            </el-table-column>

            <!-- 固定列 -->

            <el-table-column prop="feedback" label="反馈">

                <template slot-scope="scope">

                    <el-input v-model="scope.row.feedback" placeholder="输入反馈"></el-input>

                </template>

            </el-table-column>

            <el-table-column prop="estimatedDate" label="预计日期" width="130">

                <template slot-scope="scope">

                    <el-date-picker v-model="scope.row.estimatedDate" type="date" placeholder="选择日期"

                        value-format="yyyy-MM-dd">

                    </el-date-picker>

                </template>

            </el-table-column>

            <!-- 操作 -->

            <el-table-column fixed="right" label="操作" width="70" align="center">

                <template slot-scope="scope">

                    <el-button type="text" size="small" @click="handleSave(scope)">保存</el-button>

                </template>

            </el-table-column>

        </el-table>

        <el-button @click="handleCallAPI" type="primary" size="small">调接口</el-button>

    </div>

</template>

<script>

export default {

    name: 'ItmanTable2',

    data() {

        return {

            //  表头数据

            tableHead: [

                { header: "指标11111", key: "target1" },

                { header: "指标2", key: "target2" },

                { header: "指标3", key: "target3" },

                { header: "指标4", key: "target4" },

                { header: "指标5", key: "target5" }

            ],

            // 表格数据

            tableData: [

                {

                    id: 1,

                    item: "项目1",

                    target1: 1111111111111111,

                    target2: 2,

                    target3: 3,

                    target4: 4,

                    target5: 5,

                    feedback: "",

                    estimatedDate: null

                },

                {

                    id: 2,

                    item: "项目2",

                    target1: 2111110,

                    target2: 0,

                    target3: 0,

                    target4: 0,

                    target5: 0,

                    feedback: "",

                    estimatedDate: null

                },

            ],

        };

    },

    mounted() {

        //call init method here...

        console.log(this.$route.params.id)

    },

    methods: {

        handleSave(scope) {

            console.log(scope.row);

            if (scope.row.feedback == "" || scope.row.estimatedDate == "" || scope.row.estimatedDate == null) {

                this.$message({

                    message: '反馈和预计日期均不能为空',

                    type: 'warning'

                });

                return;

            }

            this.$message({

                message: '保存成功->' + scope.row.estimatedDate,

                type: 'success'

            });

        },

        handleCallAPI() {

            //  表头数据

            let apiTableHead = [

                { header: "列头001", key: "target1" },

                { header: "列头002", key: "target2" },

                { header: "列头003", key: "target3" }

            ];

            // 表格数据

            let apiTableData = [

                {

                    id: 1,

                    item: "项目1",

                    target1: 1,

                    target2: 2,

                    target3: 3,

                    feedback: "反馈1",

                    estimatedDate: "2022-12-29"

                },

                {

                    id: 2,

                    item: "项目2",

                    target1: 11,

                    target2: 22,

                    target3: 33,

                    feedback: "反馈2",

                    estimatedDate: "2022-12-30"

                },

                {

                    id: 3,

                    item: "项目3",

                    target1: 111,

                    target2: 222,

                    target3: 333,

                    feedback: "反馈3",

                    estimatedDate: "2022-12-31"

                }

            ];

            this.tableHead = apiTableHead;

            this.tableData = apiTableData;

        }

    },

};

</script>

<style>

* {

    margin: 0;

    padding: 0;

}

</style>