demand

The following functions should be completed as shown in the figure:

implementation

  • Initial implementation

    • Parent component code

      <template slot="header"> <el-table :data="imageList"> <el-table-column min-width="350px" label=" container image "> <! <table-filter :arrList="systemCodeFilterList" @cfmfilter ="systemCodeChange" /> </el-table-column> </el-table> </template> <script> export default { data() { return { systemCodeFilterList: [], imageList: "'}}, Async created () {/ / asynchronous data acquisition systemCodeFilterList try {const res1 = await this. $API. XXX () enclosing systemCodeFilterList = res1.data const res2 = await this.$api.xxx() this.imageList = res2.data } catch (error) { console.error(error) } } } </script>Copy the code

    • Table-filter Encapsulates the code

      <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>
Copy the code
  • The problem

We cannot backfill the systemCodeFilterList into slot=”header” component because the systemCodeFilterList is retrieved from the API but the table header is not rendered after the list data is retrieved.

  • The solution

    • V-if toggle add V-if to el-table and display it after guaranteed request

      <el-table :data="imageList" v-if="loaded"/> data() { return { loaded: False}} Async created() {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) } }Copy the code

    • Key toggle for rerendering

      <el-table :data="imageList" :key="tableKey"/> data() { return { tableKey: {const res1 = await this.$api.xxx();} // async created() {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) } }Copy the code