(vue)增加行，对应行删除

最新推荐文章于 2024-05-29 17:44:30 发布

nyf_unknown

最新推荐文章于 2024-05-29 17:44:30 发布

阅读量545

点赞数 10

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44754635/article/details/135365153

版权

VUE 专栏收录该内容

189 篇文章 2 订阅

订阅专栏

(vue)增加行，对应行删除

效果：
在这里插入图片描述

代码：

<div v-for="(ele,i) of algorithmList" :key="i">
  <el-form-item label="模型类型">
    <el-select
      v-model="ele.algorithmId"
      placeholder="选择模型类型"
      @change="modelTypeChanged"
    >
      <el-option
        v-for="(item,index) in modelTypeOptions"
        :key="index"
        :label="item.category"
        :value="item.category"
      ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="模型工具">
    ...
  </el-form-item>
  <el-form-item>
    <i class="el-icon-circle-plus-outline" @click="suanfaAddBtn" style="margin:0 20px;"></i>
    <i class="el-icon-remove-outline" @click="suanfaDelParam(ele, i)"></i>
  </el-form-item>
</div>

data(){
	return:{
      algorithmList: [
        {
          algorithmId: "",
          algorithmName: "", 
        },
      ],
	}
},
methods:{
	//添加
	suanfaAddBtn() {
	  this.algorithmList.push({
	    algorithmId: "",
	    algorithmName: "", 
	  });
	},
	//删除
	suanfaDelParam(ele, i) {
	  if (this.algorithmList.length > 1) {
	    this.algorithmList.splice(i, 1);
	  } else if (this.algorithmList.length == 1) {
	    this.$message({
	      message: "此类不允许删除",
	      type: "warning",
	    });
	  }
	},
}