解决el-table 使用slot="header"内筛选数据异步无法渲染的问题

需求

需要完成下列如图所示功能：

实现

• 初始实现

  • 父组件代码

     <template slot="header">
       <el-table :data="imageList">
         <el-table-column min-width="350px" label="容器镜像">
           <!--封装出来筛选组件--->
           <table-filter
             :arrList="systemCodeFilterList"
             @cfmFilter="systemCodeChange"
           />
         </el-table-column>
      </el-table>
    </template>
    
    <script>
    export default {
        data() {
            return {
              systemCodeFilterList: [],
              imageList: '',
            }
        },
        async created() {
            // 异步获取 systemCodeFilterList 数据
            try {
                const res1 = await this.$api.xxx()
                this.systemCodeFilterList = res1.data
                const res2 = await this.$api.xxx()
                this.imageList = res2.data
              } catch (error) {
                console.error(error)
              }
        }
    }
    </script>
    

  • table-filter封装代码

    <el-popover
      placement="bottom"
      trigger="hover"
      v-model="visible"
    >
      <el-radio-group v-model="radioStatus" @change="radioStatusChange">
          <el-radio v-for="(m, i) in arrList" :key="i" :label="m[valueKey]">{{m.text)}}</el-radio>
      </el-radio-group>
    </el-popover>
    

• 问题 由于systemCodeFilterList是通过 api接口获取的 但是列表数据获取后，不在进行表头的渲染，所以无法将systemCodeFilterList回填到slot="header"组件中。

• 解决方案

  • v-if 切换
    在el-table添加v-if然后在保证请求都会后展示

    <el-table :data="imageList" v-if="loaded"/>
    
    data() {
        return {
           loaded: false
        }
    }
    
    async created() {
        // 异步获取 systemCodeFilterList 数据
        try {
            const res1 = await this.$api.xxx()
            this.systemCodeFilterList = res1.data
            const res2 = await this.$api.xxx()
            this.imageList = res2.data
            this.loaded = tren
          } catch (error) {
            console.error(error)
          }
    }
    

  • key切换来实现重渲染

    <el-table :data="imageList" :key="tableKey"/>
    
    data() {
        return {
           tableKey: 0
        }
    }
    
    async created() {
        // 异步获取 systemCodeFilterList 数据
        try {
            const res1 = await this.$api.xxx()
            this.systemCodeFilterList = res1.data
            const res2 = await this.$api.xxx()
            this.imageList = res2.data
            this.tableKey++
          } catch (error) {
            console.error(error)
          }
    }