BladeX开发平台前端框架Saber(基于Vue)bug分享

最新推荐文章于 2024-10-10 14:30:00 发布

晚风不如你

最新推荐文章于 2024-10-10 14:30:00 发布

阅读量1k

点赞数

文章标签： vue.js bug javascript

本文链接：https://blog.csdn.net/love_me06/article/details/129876357

版权

文章讲述了在使用avue-crud组件时遇到的数据源与自身data属性命名冲突的问题，导致的错误。作者提供了错误代码示例，并详细说明了如何修改数据源名称以避免冲突，如将`data`改为`data1`，从而解决了问题。此外，还展示了onLoad方法中的修复部分。

摘要由CSDN通过智能技术生成

avue-crud生成的表单代码会有命名冲突

//错误代码示例 
<avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"//这里数据源是和自身的data命名冲突的需要自己改名
      :page="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @on-load="onLoad"
    >



//data里的数据
   selectionList: [],
      option: {
        height: "auto",
        calcHeight: 210,
        searchShow: true,
        searchMenuSpan: 6,
        tip: false,
        border: true,
        index: true,
        viewBtn: true,
        selection: true,
        column: [
          {
            label: "主键",
            prop: "id",
            rules: [
              {
                required: true,
                message: "请输入主键",
                trigger: "blur",
              },
            ],
          },
          {
            label: "请求类型",
            prop: "requestType",
            rules: [
              {
                required: true,
                message: "请输入请求类型",
                trigger: "blur",
              },
            ],
          },
          {
            label: "外部系统 ",
            prop: "externalSystem",
            rules: [
              {
                required: true,
                message: "请输入外部系统 ",
                trigger: "blur",
              },
            ],
          },
          {
            label: "接口名称",
            prop: "apiName",
            rules: [
              {
                required: true,
                message: "请输入接口名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "接口地址",
            prop: "apiAddress",
            rules: [
              {
                required: true,
                message: "请输入接口地址",
                trigger: "blur",
              },
            ],
          },
          {
            label: "请求报文",
            prop: "requestMessage",
            rules: [
              {
                required: true,
                message: "请输入请求报文",
                trigger: "blur",
              },
            ],
          },
          {
            label: "是否成功",
            prop: "successOrNot",
            rules: [
              {
                required: true,
                message: "请输入是否成功",
                trigger: "blur",
              },
            ],
          },
          {
            label: "时间",
            prop: "time",
            rules: [
              {
                required: true,
                message: "请输入时间",
                trigger: "blur",
              },
            ],
          },
          {
            label: "报错状态码",
            prop: "statusCode",
            rules: [
              {
                required: true,
                message: "请输入报错状态码",
                trigger: "blur",
              },
            ],
          },
          {
            label: "报错信息",
            prop: "measuresReportingInformation",
            rules: [
              {
                required: true,
                message: "请输入报错信息",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      data: [],//这里对应上面的数据源和自身data命名冲突
    };

methods里的js逻辑代码需要更改部分
  onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },

//需要更改成这样
  onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data1 = res.data.data;
        this.page.total = data1.total;
        this.data1 = data1.records;
        this.loading = false;
        this.selectionClear();
      });
    },//

总结：自己粗心大意没有意识到这个问题浪费了一天的时间