追加および削除は、アイデアの検索ベースの要素を変更するには

追加および削除は、アイデアの検索ベースの要素を変更するには

1.findクエリデータ

   //初始化页面表格数据
    getTableList(arg) {
      var params = {
        pageIndex: this.pageIndex,
        size: this.size
      };
      if (arg && this.isSearching) {
        Object.assign(params, this.searchParam);
      }
      this.axiosHttp.post("fl/flCfry/find", params).then(res => {
        this.tableData = res;
        this.currentPageNum = "";
        console.log(res);
      });
    },
    1.params固定的分页传值,跟data上的size、page同步即可
    2.arg即删除的时候需要添加的参数,和查询的时候需要带的参数(增加和修改调同一个方法不需要传分页)
	3.this.isSearching 即在点击搜索的时候判断是否在搜索状态,为true时即操作完之后带上需要查询的参数

2.save増加データ

   html:新增和编辑用同一个弹出框
   <el-dialog
      :title="editform.id ? '修改' : '新增'"
      :visible.sync="formDialogVisible"
      width="40%"
    >
      <el-form
        :model="editform"
        ref="editform"
        label-width="80px"
        style="padding:30px;"
        :rules="rules"
      >
        <el-form-item label="姓名" prop="uname">
          <el-input v-model="editform.uname"></el-input>
        </el-form-item>
        <el-form-item style="margin-top: 30px;">
          <el-button type="primary" @click="save('editform')">保存</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    //保存
    save(editform) {
      this.$refs[editform].validate(valid => {
        if (valid) {
          this.axiosHttp.post("fl/flCfry/save", this.editform).then(res => {
            this.formDialogVisible = false;
            if (this.isSearching) {
              this.getTableList("search");
            } else {
              this.getTableList();
            }
            this.editform = {};
          });
        } else {
        }
      });
    },
    正常调用查询数据,注意的是要判断是否在查询状态,如果为true要带上参数(参数即搜索框editform)

削除データを3.delete

    //删除
    del() {
      let id = "";
      this.selectRow.forEach(item => {
        id += item.id + ",";
      });
      var obj = {
        id: id
      };
      this.$confirm("确定要删除吗,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(res => {
          this.axiosHttp.get("fl/flCfry/delete", { params: obj }).then(res => {
            //解决第二页删除所有条数不能返回数据
            if (
              this.tableData.data.length == this.selectRow.length &&
              this.pageIndex > 1
            ) {
              this.pageIndex = this.pageIndex - 1;
            }
            if (this.isSearching) {
              this.getTableList("search");
            } else {
              this.getTableList();
            }
          });
        })
        .catch(() => {});
    },
    这个是多选删除的例子,是把数据循环对比删除的,
    1.其中遇到的问题是在删除当前页的时候删除完毕当前显示空,其中判断了要删除的长度和当前页的长度,如果一样,则会删除当前页所有数据,就把当前页减少一
    2.此时也要判断是否在搜索状态,然后重新查询数据

4.変更

    //修改
    edit() {
      if (this.selectRow.length > 1) {
        this.$message({
          showClose: true,
          type: "warning",
          message: "不允许同时编辑多条数据"
        });
      } else {
        this.editform = JSON.parse(JSON.stringify(this.selectRow[0]));
        this.formDialogVisible = true;
        delete this.editform.createTime;
        delete this.editform.updateTime;
      }
    },
    修改较为简单,调用的是同一个方法,已经判断过isSearching

5.クエリ

    //查询
    searchTableList() {
      this.isSearching = true;
      this.pageIndex = 1;
      this.getTableList("search");
    },
    查询直接调用getTabbleList方法,默认传参

6.編集、および削除操作の内部

    // 操作的删除
    handleDelete(index, row) {
      this.selectRow = [];
      this.selectRow.push(row);
      this.del();
    },
    //编辑
    handleEdit(index, row) {
      this.formDialogVisible = true;
      this.editform = JSON.parse(JSON.stringify(row));
      delete this.editform.createTime;
      delete this.editform.updateTime;
    },

7.リセットとページング、ポップアップ操作がキャンセル

    //重置
    resetForm() {
      this.isSearching = false;
      this.searchParam = {};
      this.getTableList();
    },
   1.重置直接可以把搜索栏清空
   2.把当前搜索状态设置为false,以防止,重置之后再再次输入而并没有点击查询出现的问题
   3.默认不传参数(只传分页重新渲染数据)
      //点击分页获取当前页数据
    handleCurrentChange(val) {
      this.pageIndex = val;
      if (this.isSearching) {
        this.getTableList("search");
      } else {
        this.getTableList();
      }
    }
	4.分页处理,改变页数的响应页面,并且判断是否在isSearching状态
        //关闭弹窗后续操作
    close() {
      this.formDialogVisible = false;
      this.editform = {};
      this.$refs.editform.resetFields();
    },
    点击取消的时候,除了关闭弹窗,还需要把弹框置空,把表格验证清除掉
   

レガシー:

検索は、キーワードを入力すると、ユーザの入力パラメータが空の状態で渡されます後、フロントエンドの感触は、それらに対処するために特に厄介であるとき、もしその後、最終的に交渉Javaの背景を通じて解決、数多くの判断を必要とする、発生空にするA。一般的な考え方:そのように(空集合がヌルである)プロセスを作るために内部の空気の値、次に、パラメータを受信ツールタイプを追加

公開された21元の記事 ウォンの賞賛4 ビュー2729

おすすめ

転載: blog.csdn.net/smallico/article/details/103165353