vxe追加行、追加列。

动态table：

<template>

    <div>       

        <div v-for="(tableData, i) in datas.block" :key="`${datas.block.id}-${datas.block[i].header.length}`" style="margin-bottom: 20px; background:#eee; padding:8px;">

            <vxe-table ref="xTable1" border keep-source :data="tableData.tbody" align-header="center" align="center">

                <vxe-table-colgroup>

                    <template #header>

                        <vxe-input v-model="tableData.value1" placeholder="请输入标题" size="mini"></vxe-input>

                    </template>

                    <vxe-column v-for="(columnHeader, index) in tableData.header" :key="index" width="100px">

                        <template #header="scope">

                            <vxe-input v-model="columnHeader.title" placeholder="" size="mini" style="float:left; width:calc(100% - 20px);" ></vxe-input>

                             <i

                                v-if="index > 1"

                                class="el-icon-delete"

                                style="font-size:16px; float:right;"

                                @click="event_block_remove_column(tableData, scope)"

                            ></i>

                        </template>

                        <template slot-scope="{ row, columnIndex }">

                            <el-input v-model="row.columndata[columnIndex].content" size="mini"></el-input>

                        </template>

                    </vxe-column>

                    <!-- 分组列 -->

                    <vxe-column title="分组" width="70px">

                        <template slot-scope="{ row }">

                            <el-input v-model="row.zu"  type="number" :min="0" :step="1" size="mini" @keydown.native="channelInputLimit"></el-input>

                        </template>

                    </vxe-column>

                    <vxe-column title="操作" width="120px">

                        <template slot-scope="scope">

                            <el-button v-if="scope.rowIndex >= 1" size="mini" type="danger" @click="event_block_remove_row(tableData,scope)">删除整行</el-button>

                        </template>

                    </vxe-column>

                </vxe-table-colgroup>

            </vxe-table>

           

             <div style="margin-top: 10px;">

                <el-button-group>

                    <el-button size="mini" type="primary" @click="event_block_add_column(tableData)">追加列</el-button>

                    <el-button size="mini" type="primary" @click="event_block_add_row(tableData)">追加行</el-button>

                </el-button-group>

            </div>

        </div>

    </div>

</template>

<script>

export default {

    data() {

        return {

            value11:null,

            aa:["aa","bb","cc"],

            datas: {

                block: [

                    {

                        id: "aaa",

                        value1: "",

                        header: [{id:1, title: "得分" }, {id:2, title: "" }],//表头数组

                        tbody: [//{}表每行内容,columndata行内每个单元格内容,,对应<el-input v-model="row.columndata[columnIndex].title" size="mini"></el-input>

                            {

                                id:1,zu:"",columndata: [{ content: "" }, { content: "" }],

                            },

                             {

                                id:2,zu:"",columndata: [{ content: "" }, { content: "" }],

                            },

                        ],

                       

                    },

                ],

            },

        };

    },

    methods: {

        /**

         * 返回

         */

        event_back() {

            this.$emit("event", "goto", "list");

        },

       

   

        //追加列

        event_block_add_column(tableData) {

            tableData.header.push({id:this.pub.utils.uuid(), title: "" });

            tableData.tbody.forEach((element) => {

                element.columndata.push({ content: "" });

            });

            console.log("tableData",tableData)

        },

        //追加行

        event_block_add_row(tableData) {

           

            let addrow =[];

            for(let i=0;i<tableData.tbody[0].columndata.length;i++){

                addrow.push({ content: "" })

            }

            let a ={id:this.pub.utils.uuid(),columndata:addrow}

            tableData.tbody.push(a);

           

        },

        //删除行

        event_block_remove_row(tableData,scope){

                tableData.tbody.splice(scope, 1)

        },

        //删除列

        event_block_remove_column(tableData, scope){

            tableData.header.splice(scope.columnIndex,1);

            tableData.tbody.forEach((element) => {

                element.columndata.splice(scope.columnIndex,1);

            });

        },

         /**

         * bug fix：指定输入类型为number时仍然可以输入字母'e'和小数点'.'（因为也属于数字类型的范围），这里做一下输入限制

         */

        channelInputLimit (e) {

        let key = e.key

        // 不允许输入'e'和'.'

        if (key === 'e' || key === '.' || key === '-' || key === '+') {

            e.returnValue = false

            return false

        }

        return true

        },

    },

    //所有接口

    props: {

       rowData: {

            required: false,

            default() {

                return {};

            },

        },

    },

    components: {},

    watch: {},

    //初始化

    created() {

       

           

    },

};

</script>

<style scoped></style>