Vue.js中如何将List组件过滤结果传递给兄弟组件填充DataTable

解决方案 #

你需要修改以下几处代码即可完成DataTable的数据填充：

1. 首先给你的List组件补充data字段初始化，避免初始值报错：

data() {
  return {
    // 原有变量（tagInput、areaSelecionada、grupos等）保持不变，新增下面两个字段
    loading: false,
    // 存储过滤后的结果，初始为空数组
    filtroAplicado: []
  }
}

2. 修正过滤函数filtroVariaveis，补充请求结束后的加载状态关闭逻辑：

async filtroVariaveis () {
  try {
    this.loading = true;
    // 原有逻辑全部保留
    this.variaveis = await this.variaveisService.listVariables();

    let idGrupos = null;
    if (!this.grupos[0] && this.maquinaSelecionada[0]) {
        idGrupos = this.gruposOpcoes.map(m => m.id);
    }

    if (!this.grupos[0] && !this.maquinaSelecionada[0] && this.areaSelecionada[0]) {
        const idMaquinas = this.maquinasOpcoes.map(m => m.id);
        const grupo = this.gruposOpcoes.filter(a => idMaquinas.includes(a.id_maquina));
        idGrupos = grupo.map(a => a.id);
    }

    if (this.grupos[0]) {
        idGrupos = this.grupos.map(g => g.id);
    }

    const tipos = this.tipoVariavel.map(t => t === "Analógica" ? t = "ANALOGICA" : "DIGITAL");
    const tag = this.tagInput || this.variaveis.map(t => t.tag);
    const descricao = this.descricaoInput || this.variaveis.map(d => d.descricao);

    this.filtroAplicado = ((await this.variaveisService.listVariables(idGrupos, tipos, tag, descricao)) || []);
  } catch (err) {
    console.log(err);
  } finally {
    // 新增这行，不管请求成功失败都关闭加载状态
    this.loading = false;
  }
}

3. 修改List组件的linhas计算属性，绑定过滤后的数据集：

computed: {
  linhas () {
    // 把原来遍历的this.lista替换为过滤后的this.filtroAplicado
    return this.filtroAplicado.map((row) => ({
      href: { name: 'edit_variavel', params: { id: row.id }},
      cols: this.colsMap(row)
    }));
  }
},

4. 补全List组件中GenericList组件的传参，把加载状态同步给表格：

<GenericList
  title="变量"
  :linhas="linhas"
  :loading="loading"
  data-table-state-name="Variável"
  add-route="add_variavel"
  edit-route="edit_variavel"
  :cols="['序号', '标签', '描述', '类型']"
  :cols-name="['id', 'tag', 'descricao', 'tipo']"
  :cols-map="i => [i.id, i.tag, i.descricao, i.tipo]"
/>

原理说明 #

你过滤得到的结果存在filtroAplicado变量中，计算属性linhas会自动监听该变量的变化，实时生成符合GenericList要求的行数据结构，传入组件后会被直接透传给内部的DataTable组件，即可完成表格数据的渲染。

内容的提问来源于stack exchange，提问作者mazha