动态添加、删除table表格行和列

 

正常情况下要动态添加、删除表格的行和列，如果要牵扯到数据绑定等问题的话 会很复杂，但是我们可以把这个比较复杂的问题进行拆分，动态添加删除行和列，无非难点在于 怎么添加列 以及如何添加行，对于添加列逻辑可能稍显复杂 ，但是添加行倒是很简单，只需要往定义的 list里面push空的数据即可实现新增一条数据，那么如果添加列，其实我们可以仿照这个， 换个思路，

整体添加列要考虑 表头的设置 以及数据添加 数据绑定这些，但是我们可以把这些给分开，我们先添加表头

定义一个表格list 里面包含要添加表头的 name 以及 prop以及要添加数据的类型（方便我们添加成功表格之后进行编辑）

这样就简单多了 看图 如下

设置完成生成一个list 作为下一个表格的表头信息，再来添加数据，这样就完成了 简单的添加行和列。代码如下：

 

<template>
    <!-- 确保组件类名 class="component- -->
    <mp-dialog class="component-editTable"
        title="设置表格信息"
        :visible.sync="visible"
        :append-to-body="true"
        v-if="visible"
        width="50%">
        <div class="addHeader">
            <div class="title">添加表头信息</div>
            <div class="btn_box">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddDetails">添加</el-button>
                <el-button type="success" icon="el-icon-delete" size="mini" @click="handleDeleteDetails">删除</el-button>
            </div>
            <el-table
            :data="headerList"
            :row-class-name="rowClassName"
            @selection-change="handleDetailSelectionChange"
            ref="tb"
            >
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column label="序号" align="center" prop="xh" width="50">
                    <template slot-scope="scope">
                        <span>{{headerList[scope.row.xh-1].xh}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="字段名称" prop="labelName">
                    <template slot-scope="scope">
                        <el-input v-model="headerList[scope.row.xh-1].labelName" clearable placeholder="请输入字段名"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="props" prop="propsName">
                    <template slot-scope="scope">
                        <el-input v-model="headerList[scope.row.xh-1].propsName" clearable placeholder="请输入字段名"></el-input>
                    </template>
                </el-table-column>

                <el-table-column label="字段类型" align="center" prop="typeName">
                    <template slot-scope="scope">
                        <el-select
                        clearable
                        v-model="headerList[scope.row.xh-1].typeName">
                            <el-option
                            v-for="dict in zdtsOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                            />
                        </el-select>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="headerList.length>0">
            <div class="title">添加表格数据</div>
            <div>
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="add">添加</el-button>
                <el-button type="success" icon="el-icon-delete" size="mini" @click="del">删除</el-button>
                <el-button type="primary" icon="el-icon-folder" size="mini" @click="save">保存</el-button>
            </div>
            <el-table
            :data="dataList"
            :row-class-name="rowName"
            @selection-change="selectChange"
            ref="tb">
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column label="序号" align="center" prop="xh" width="50">
                    <template slot-scope="scope">
                        <span>{{dataList[scope.row.xh-1].xh}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                v-for="(item,index) in headerList"
                :key="index"
                :label="item.labelName"
                :prop="item.propsName">
                    <template slot-scope="scope">
                        <el-input v-if="item.typeName == 'string'" v-model="scope.row[item.propsName]" clearable placeholder="请输入"></el-input>
                        <el-select v-if="item.typeName == 'select'"  clearable v-model="scope.row[item.propsName]">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"/>
                        </el-select>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <!-- <add-table ref="add_table" :header_list="headerList"></add-table> -->
    </mp-dialog>
</template>

<script>
    // import addTable from './addTable'
    export default {
        name: "editTable",
        // components: {addTable},
        props: {
        },
        data() {
            return {
                visible: false,
                labelName: '',
                propsName: '',
                typeName: '',
                xh:'',
                headerList: [],//详细list
                checkedDetail: [],//选中的从表数据
                zdtsOptions: [
                    {
                        dictLabel: '字符串',
                        dictValue: 'string'
                    },
                    {
                        dictLabel: '下拉框',
                        dictValue: 'select'
                    },
                ],
                options: [
                    {
                        label: '测试数据',
                        value:'demo'
                    }
                ],

                dataList: [],
                checkData: [],
                componentList: [],
                str: [],
            }
        },
        // created(){},
        // mounted(){},
        filters: {},
        computed: {},
        methods: {
            show() {
                this.visible = true;
            },
            rowClassName({ row, rowIndex }) {
                row.xh = rowIndex + 1;
            },
            //单选框选中数据
            handleDetailSelectionChange(selection) {
                this.checkedDetail = selection;
            },
            // 添加表头信息----------------------
            handleAddDetails() {
                let obj = {};
                obj.labelName = '';
                obj.propsName = '';
                obj.typeName ='';
                this.headerList.push(obj);
            },
            // 删除
            handleDeleteDetails() {
                if (this.checkedDetail.length == 0) {
                    this.$alert("请先选择要删除的数据", "提示", {
                    confirmButtonText: "确定",
                    });
                } else {
                    this.checkedDetail.forEach(item => {
                        this.headerList.forEach((res,index) => {
                            if(item.xh == res.xh) {
                                this.headerList.splice(index,1)
                            }
                        })
                    })
                }
            },

            // 添加表格数据信息----------------------
            selectChange(selection) {
                this.checkData = selection
            },
            rowName({ row, rowIndex }) {
                row.xh = rowIndex + 1;
            },
            add() {
                let obj = {};
                let stateList= [];
                this.headerList.forEach(item => {
                    if(item.labelName== '' || item.propsName== ''||item.typeName == '') {
                        stateList.push(item)
                    }
                    let arr = Object.keys(item);
                    arr.forEach((keys,i)=>{
                        if (keys == 'propsName') {
                            this.$set(obj, Object.values(item)[i],'');
                        }
                    })
                })
                if(stateList.length>0) {
                    this.$message.error('请添加完整表头信息')
                }else{
                    this.dataList.push(obj);
                }
            },
            del() {
                if (this.checkData.length == 0) {
                    this.$alert("请先选择要删除的数据", "提示", {
                    confirmButtonText: "确定",
                    });
                } else {
                    this.checkData.forEach(item => {
                        this.dataList.forEach((res,index) => {
                            if(item.xh == res.xh) {
                                this.dataList.splice(index,1)
                            }
                        })
                    })
                }
            },
            save() {
                console.log('---------save',this.dataList);
            },
        },
        watch: {},
    }
</script>

<style lang="scss" scoped>
    .component-editTable {
        /deep/ .el-dialog__body {
            padding: 15px;
        }
        .addHeader {
            margin-bottom: 20px;
        }
        .title {
            border-left: 2px solid #fff;
            margin: 10px 0;
            padding: 0 10px;
        }
        .btn_box {
            margin-bottom: 15px;
        }
    }
</style>
<style lang="scss">
    .component-editTable { //dialog使用 customClass="xxx_body"

    }
</style>