Element-ui table 表格 多选回显

Element-ui table 表格 多选回显

1. 最直接想到的就是遍历数据利用: this.$refs.roleTable.toggleRowSelection(row, true);进行回显,但是我遇到的问题是树形结构表格这样的话感觉很麻烦.
2. 于是:利用 formatter 省去了自己遍历
   代码如下:

    echoSelectRoleByUserId(userId) {
      this.echoRoleIds = [];	// 需要回显的id数组
      this.filterIds = [];	// 清空回显的id数组
      var s = true;
      if (userId !== undefined && userId > 0) {
        sysApi.echoSelectRoleByUserId({ userId: userId }).then(data => {
          this.echoRoleIds = data.data.data.list.map(item => {
            return item.roleId;
          });
        });
      }
    },

3. 需要过滤的行加上 :formatter="formatSels"
4. 格式化方法

   formatSels(row, column, cellValue) {
      if(this.echoRoleIds.length === 0){
        return cellValue;
      }
      // 判断行id在需要回显的数组里面  并且不在已经回显的数组里面
      if(this.echoRoleIds.indexOf(row.id) > -1 && this.filterIds.indexOf(row.id) === -1){	
        this.filterIds.push(row.id);	// 记录已经回显的数据行ID
        this.$refs.roleTable.toggleRowSelection(row, true);
      }
      return cellValue;
    }