【前端】vue采用el-table 添加行手动填写数据和删除行及提交

需求：点击新增按钮实现下列弹窗的效果，点击添加行新增一行，点击删除进行删除行，点击提交将数据传递到后端进行保存。

代码

data

methods

实现效果

代码

      
        添加行
        
          
            
              
              <!--              {{ scope.row.index }}  显示在输入框的下面-->
            
          

          
            
              
            
          

          <!-- 序号 -->
          
            
              
            
          

          
            
              
              <!--              {{ scope.row.riskPointName }}-->
            
          
          
            
              
              <!--              {{ scope.row.riskLevel }}-->
            
          
          
            
              
              <!--              {{ scope.row.hiddenDanger }}-->
            
          
          
            
              
              <!--              {{ scope.row.type }}-->
            
          
          
            
              
              <!--              {{ scope.row.accident }}-->
            
          
          
            
              
              <!--              {{ scope.row.remark }}-->
            
          
          
            
              删除
              
            
          
        
        提交

data

      data(){
        return{
          //录入数据字典资产信息
          dataId: 1,
          //数据字典资产信息的集合
          tableData: [],
          //数据字典资产信息录入
          openDataDictionary: false,
          //数据字典资产信息录入弹出框标题
          titleDataDictionary: "",
        }
      }

methods

methods: {
    /** 删除按钮操作 */
    handleDeleteDataDictionary(index, rows) {
      alert("index" + index);//这个index就是当前行的索引坐标
      this.$modal.confirm('是否删除当前行？').then(function () {
        rows.splice(index, 1); //对tableData中的数据删除一行
      }).then(() => {
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },


    //   添加行
    addDemo() {
      var d = {
        index: this.dataId++,
        assetNo: "", //资产编号实时回显
        riskSourceName: "",
        riskLevel: "",
        riskPointName: "",
        type: "",
        hiddenDanger: "",
        dangerLevel: "",
        accident: "",
        remark: ""
      };
      this.tableData.push(d);
      setTimeout(() => {
        this.$refs.demoTable.setCurrentRow(d);
      }, 10);
    },

    /**
     * 数据字典资产信息录入点击提交执行的方法
     * */
    handleDataDictionaryAssetInfo() {
      addDataDictionaryAssetInfo(this.tableData).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.open = false;
      });
    },

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/61ce36cd81.html