Vue element中table增加行与删除行

AgoniWU

已于 2023-08-16 14:54:37 修改

阅读量606

点赞数

文章标签：前端 vue.js javascript

于 2023-08-16 13:43:22 首次发布

本文链接：https://blog.csdn.net/AgoniWU/article/details/132315702

版权

Vue element中table增加行与删除行

HTML代码

 <el-table-column label="操作" fixed="right" width="80" >
	 <template v-slot="scope">
		<el-form-item>
		<div style="color: red; cursor: pointer; text-align: center;" title="删除" @click="delRow(scope)"><i
			 class="el-icon-delete"></i>
		 </div>
		</el-form-item>
	 </template>
</el-table-column>
<el-button @click="addRow()" icon="el-icon-circle-plus-outline">新增</el-button>

js代码

//新增行
    addRow(){
      if (this.businessTypeForm.businessTypeData.length>=20) {
        this.$message.warning("只能新增20条数据！")
        return false;
      }
      let list = {
        rowNum:this.rowNum,
        collateral_name: "", //	押品名称	varchar	2000
        collateral_position: "", //	押品处所	varchar	2000
        collateral_certificate: "", //	权属证书及编号	varchar	2000
        certificate_class:"",//权证类型
        // collateral_count: "", //	数量	number	200
      };
      this.businessTypeForm.businessTypeData.push(list);
      this.rowNum += 1;
    },
    //删除行
    delRow(scope){
      for(var i=0; i<this.businessTypeForm.businessTypeData.length;i++){
        if(scope.$index === i){
          this.businessTypeForm.businessTypeData.splice(i, 1);
          // this.$message.success("删除成功");
        }
      }
    },