vue+elementUi 动态添加删除table表格

<div class="addPlus" style="margin-top:15px;">
                    <el-button type='primary' @click="addLevel" size='mini'>添加关卡</el-button>
                </div>
                <el-table :data="customList" size='mini' style="width: 100%;margin-top:15px">
                    <el-table-column label="关卡名称">
                        <template slot-scope='scope'>
                            关卡{{scope.$index+1}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="questionName" label="试题名称">
                        <template slot-scope="scope">
                            <el-input disabled v-model="scope.row.questionName" size='mini'></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="startScore" label="初始分">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.startScore" placeholder="只能输入数字"
                                @input="scope.row.startScore = scope.row.startScore.replace(/[^\d]/g,'')" size='mini'>
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="extraScore" label="额外加分">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.extraScore" placeholder="只能输入数字"
                                @input="scope.row.extraScore = scope.row.extraScore.replace(/[^\d]/g,'')" size='mini'>
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="questionType" label="试题类型">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.questionType" placeholder="请选择" size='mini'>
                                <el-option label="附件题" value="essay">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.questionName == ''" @click="setTest(scope.row,scope.$index)"
                                type="text" size="small">设置试题
                            </el-button>
                            <el-button v-else @click="setTest(scope.row,scope.$index)" type="text" size="small">修改试题
                            </el-button>
                            <el-button type="text" size="small" @click='deleteHandle(scope.$index)'>删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
//新增关卡
            addLevel() {
                this.customList.push({
                    // seq: parseInt(this.customList.length + 1),
                    // customName: '',
                    extraScore: '',
                    questionName: '',
                    questionType: '',
                    startScore: ''
                });
            },
//设置试题
            setTest(row, index) {
                row.seq = index
                if (row.questionId) {
                    this.transferList.forEach(item => {
                        if (item.key == row.questionId) {
                            this.transferRight.push({ label: item.label, key: row.questionId })
                        }
                    })
                }
                if (this.transferRight.length != 0) {
                    this.isClick = true;
                }
                this.getQuestionData();
                this.isShowTransfer = true;
                this.secondStep = false;
                this.tableRowData = row;
            },
            //删除
            deleteHandle(index) {
                this.customList.splice(index, 1);
            },

版权声明:本文为weixin_46156770原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。