el-table的多选框选择:以及表单的增修改删

233 阅读1分钟
     <el-table
  v-loading="loading"
  :data="productList"
  lazy
  ref="dataTreeList"
  :row-key="getRowkey"
  :load="load"
  :expand-row-keys="expands"
  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  @selection-change="handleSelectionChange"
  :cell-class-name="addClass2"
>
@selection-change="handleSelectionChange"  

 // 多选框选中数据
handleSelectionChange(selection) {
//this.ids全局定义选中的数组   ids: [],
      this.ids = selection.map(item => item.id);
      console.log(selection);
      //全局定义的数据 可以做表单这行数据的回显示
      this.formValue = selection[0];
      console.log(this.ids); 
  // 非单个禁用    single: true,  
      this.single = selection.length != 1;
           // 非多个禁用multiple: true,
      this.multiple = !selection.length;
},

  /** 修改按钮操作 */
handleUpdate(row) {
  this.reset();
  if (row) {
  //深拷贝
  //点击这行的修改按钮 深拷贝这行的数据
    this.form = { ...row };
    this.open = true;
    this.title = "修改下发配置页面";
  } else {
  //就是选中多选框这一条数据 然后回显示
    this.form = this.formValue;
    this.open = true;
    this.title = "修改下发配置页面";
  }
},

 /** 提交按钮 */
 **调新增接口,判断是否有id,没有就调新增接口** 这个字段id 和后端定义好是哪个就判断按
submitForm: function() {
  this.$refs["form"].validate(valid => {
    if (valid) {
      if (this.form.id != undefined) {
        updateDevice(this.form).then(response => {
          if (response.code === 200) {
            this.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          }
        });
      } else {
        addDevice(this.form).then(response => {
          if (response.code === 200) {
            this.msgSuccess("新增成功");
            this.open = false;

            this.getList();
          }
        });
      }
    }
  });
},
 /** 删除按钮操作 */
handleDelete(row) {
  const deviceids = row.id || this.ids;
  this.$confirm(
    '是否确认删除下发配置编号为"' + deviceids + '"的数据项?',
    "警告",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }
  )
    .then(function() {
    //delDevice删除的接口 
      return delDevice(deviceids);
    })
    .then(() => {
      this.getList();
      this.msgSuccess("删除成功");
    })
    .catch(function() {});
    }
  }
};