vue+element 表单相关项目问题（二）——数据回显持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

1.关于回显的问题

1.1 `el-checkbox` 属于复杂数据类型

由于vue机制，回显只显然简单数据类型，当遇到复杂数据类型时，vue不能那么及时的渲染到页面上，我们可以通过this.$set()或者vue.set()来解决。在data的edit.model里面，让isManager为false,在接口里将获取到的res.data传给点击修改的弹框绑定的数据，我这里是this.edit.model。让this.edit.model={...res.data}，然后在this.edit.model.isManager做判断。如果不是主管，则为false (0),是主管则为true (1)。具体代码如下：

  SmsUserService.getById(id).then((res) => {
        console.log("！！", res);
        this.edit.model = { ...res.data };
        if (!this.edit.model.isManager) {
          this.$set(this.edit.model, "isManager", false);
          this.$forceUpdate();
        } else {
          this.$set(
            this.edit.model,
            "isManager",
            this.edit.model.isManager == 1
          );
          this.$forceUpdate();
        }
   }

1.2 级联选择器 `el-cascader`

el-cascader 也是属于复杂数据类型如果不加以处理，是达不到回显效果的。思路如下：先让一个数组为空，然后遍历级联选择器绑定的数据，将数据push到这个新的数组里面，因为有多选情况，所以这里设了两个数组，遍历两次。具体代码如下：

       let text = [];
        this.options.forEach((item) => {
          text.push({ label: item.label, value: item.value });
          if (item.children != undefined) {
            item.children.forEach((data) => {
              text.push({ label: data.label, value: data.value });
            });
          }
        });
        let value = [];
        res.data.departmentName.split(",").forEach((item) => {
          text.forEach((data) => {
            if (item == data.label) {
              value.push(data.value);
            }
          });
        });
        this.edit.model.departmentIds = value;

1.3效果

2.路由传参问题

因为有一个需求，需要将当前页面的部分数据在点击详情的情况下传递给它，并跳转到详情页面，这里我想到了兄弟传参bus. $emit(),bus.$ on(),这里传过去的数据给到另一个页面的接口参数，用于渲染详情页列表数据。然后在路由上携带参数，详情页接收这个参数。

2.1路由传参

这里用来放请求头

            <el-button
              @click="viewMonthDetails({ month: scope.row.month, ...query })"
              type="text"
              size="small"
              >查看</el-button
            >
          </template>
          
        this.$router.push({
          path: "/finance/salesall/permonthdetail",
          query: {
            month: query.month,
            year: query.year,
            userName: this.options[this.usermap].label,
            userId: this.query.userId,
          },
        });

详情页面这样接收

  <h2 style="margin: 0 15px">{{ this.$route.query.userName }}</h2>
  <h2 style="margin: 0 15px">{{ this.$route.query.month }}月</h2>

效果如下：

2.2bus事件总线

bus全局事件总线的用法

2.2.1.新建一个文件，我这里是salesBus.js，如下所示：

2.2.2.然后就是两个组件之间的通信

传递事件名 this. $bus.$ emit(event) 接收事件名，并作出相应操作 this. $bus.$ on(event,fn) 具体操作是这样的：在获取详情页的接口里写上bus事件总线，并且这个要放在this.$router.push()的下面。viewMonthDetails是上面查看的点击事件

      bus.$emit("viewMonthDetails", query);

2.2.3 详情页面接收

这里放到了mounted里面

 mounted() {
    bus.$on("viewMonthDetails", (data) => {
      console.log("viewMonthDetails", data);
      this.busData = data;
      let jiegou = { ...this.busData };
      this.query.month = jiegou.month;
      this.query.year = jiegou.year;
      this.query.userId = jiegou.userId;
    });
    const { month, year, userId } = this.$route.query;
    this.query.month = month;
    this.query.year = year;
    this.query.userId = userId;
    this.getListData();
    this.searchUserConfig();
  },

vue中使用bus传值时，接收页面多次触发接收方法，多个页面公用一个bus时会触发所有打开过的bus,所以我们要移除监听事件

 beforeDestroy() {
    //移除监听事件"viewDetails"
    bus.$off("viewDetails");
  },

2.3 效果

3表单排序问题

[element官网是这样写的](组件 | Element)

在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。

3.1一般模式

我们只需在当前列表头加入sortable即可

3.2自定义模式

首先在表头el-table里面:default-sort="{prop: 'sortNo', order: 'descending'}" 其中，prop里面的sortNo是对应列绑定的prop值，order里面是自定义方法：ascending【上升】, descending【下降】然后在对应的列放上sortable

3.3 效果

至此大功告成！由于是新手，最近遇到了很多棘手的问题，我将持续在掘金上更新！

vue+element 表单相关项目问题（二）——数据回显