vue表格实现点击按钮手动添加有序号有选项的一行

需要添加行的表格：

<el-table :data="form.options" style="width: 100%" size='small' empty-text='暂无数据' border> <el-table-column label="序号" width="60"> <template slot-scope="{$index}"> {{$index + 1}} </template> </el-table-column> <el-table-column prop="label" label="label" width="60"> </el-table-column> <el-table-column label="选项" show-overflow-tooltip> <template slot-scope="{row}"> <el-input v-model="row.name" size='small'></el-input> </template> </el-table-column> </el-table> <!-- 只要选项有了四个，那么添加按钮就会隐藏 --> <el-button type="text" v-if="form.options.length<4" @click="addOption">添加</el-button>

而data里面：

data(){ return{ form:{ options:[] } } }

methods里面（重点）：

// 模态框上点击添加按钮来添加选项 addOption(){ let option = {} let label = '' // 根据选项的长度为判断来给label赋值 switch(this.form.options.length){ case 0: label = 'A'; break; case 1: label = 'B'; break; case 2: label = 'C'; break; case 3: label = 'D'; break; } option.label = label this.form.options.push(option) }