使用vue动态在列表中添加或者删除某一行
<template>
<div class="container">
<h4 style="margin-left: 20px;">线路停靠站站点</h4>
<el-button
type="primary"
size="mini"
icon="el-icon-circle-plus-outline"
@click="addRow"
style="margin-bottom: 20px;margin-left: 20px;"
>新增一行</el-button
>
<el-table :data="tableData" border>
<el-table-column
label="序号"
align="center"
type="index"
fixed
sortable
min-width="80"
/>
<el-table-column label="站点名称" prop="zdmc" align="center" >
<template slot-scope="scope">
<div class="flex align-center">
<el-input v-model="scope.row.zdmc" />
</div>
</template>
</el-table-column>
<el-table-column label="停靠时间" prop="zdsj" align="center" >
<template slot-scope="scope">
<div class="flex align-center">
<!-- <el-input v-model="scope.row.colcumn2" /> -->
<el-time-picker v-model="scope.row.zdsj" class="date-box" format="HH:mm" value-format="HH:mm"></el-time-picker>
</div>
</template>
</el-table-column>
<el-table-column label="是否启用" prop="isEnable" align="center" >
<template slot-scope="scope">
<div class="flex align-center">
<!-- <el-input v-model="scope.row.colcumn" /> -->
<el-radio v-model="scope.row.isEnable" label="1">启用</el-radio>
<el-radio v-model="scope.row.isEnable" label="-1">不启用</el-radio>
</div>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
type="success"
icon="el-icon-plus"
circle
size="small"
@click="addRowIndex(scope.$index)"
></el-button>
<el-button
type="danger"
icon="el-icon-minus"
circle
size="small"
@click="delRow(scope.$index)"
></el-button>
</template>
</el-table-column>
</el-table>
<div class="form_block" style="text-align: center;">
<el-button @click="cancel" v-if="!disabled">取消</el-button>
<el-button type="primary" @click="handleSubmit" v-if="!disabled">提交</el-button>
</div>
</div>
</template>