vue 动态添加、修改、删除某一条数据
1.场景:最近需求多次出现要动态去增删改选中的一行数据,当只有一条数据时不让删除。
·
1.场景:最近需求多次出现要动态去增删改选中的一行数据,当只有一条数据时不让删除。故记录一波~
未操作:
新增数据:
删除第二条数据:
2.实现:
<div>
<el-row :gutter="10" class="flex_middle row-item">
<el-col :span="2"
><div class="center-text left-text input-">序号</div>
</el-col>
<el-col :span="10"> <div class="left-text">xxx1</div> </el-col>
<el-col :span="4"> <div class="left-text">xxx2</div></el-col>
<el-col :span="6"> <div class="left-text">权重</div> </el-col>
<el-col :span="2" class="flex_space_around">
<i class="blue el-icon-circle-plus" @click="addQueryClick()"></i>
</el-col>
</el-row>
<el-row
:gutter="10"
class="flex_middle row-item"
v-for="(item, index) in queryArr"
:key="index"
>
<el-col :span="2"
><div class="center-text left-text input-text">
{{ ++index }}
</div></el-col
>
<el-col :span="10"
><el-input v-model="item.queryxxx1" placeholder="参数名称"></el-input
></el-col>
<el-col :span="4">
<el-input v-model="item.queryxxx2" placeholder="参数名称"></el-input>
</el-col>
<el-col :span="6"
><el-input v-model="item.queryExample" placeholder="参数示例"></el-input
></el-col>
<el-col :span="2" class="flex_space_around"
><i
class="el-icon-error blue"
@click.prevent="removeQueryClick(item)"
></i
></el-col>
</el-row>
</div>
<script>
export default {
data() {
return {
queryArr: [
{
queryName: '',
queryMust: '',
queryExample: '',
queryRemarks: ''
}
]
},
//-------------方法----------------
methods: {
// 添加
addQueryClick() {
this.queryArr.push({
queryName: '',
queryMust: 'must',
queryExample: '',
queryRemarks: ''
})
},
// 删除
removeQueryClick(item) {
if (this.queryArr.length == 1) return false
let index = this.queryArr.indexOf(item)
if (index !== -1) {
this.queryArr.splice(index, 1)
}
},
}
更多推荐
已为社区贡献4条内容
所有评论(0)