0

我有一个包含一些数据的数组，在分页事件之后，我用下一页数据更新了数组，所以它应该用一组新数据更新视图，尽管它更新了前一组数据仍然位于的视图DOM 视图，理想情况下它应该清除先前的视图并将新的数据集呈现给 DOM

import { Component, Element, h, Listen, Prop, State } from '@stencil/core'

@Component({
  tag: 'test-common-listing',
  styleUrl: 'test-common-listing.scss',
  shadow: true,
})
export class TestCommonListing {
  @Element() el: HTMLElement

  @Prop() name: string
  @Prop() url: string
  @Prop() columns: any

  @State() list: Array<any> = []
  @State() page_number: number = 1
  @State() page_size: number = 5


  @Listen('pageChange')
  pageCanged(page) {
    this.page_number = page.detail
  }
  get filterList() {
    return this.list.slice((this.page_number - 1) * this.page_size, this.page_number * this.page_size)
  }
  async componentWillLoad() {
    console.log('component will load')
    const res = await fetch(this.url)
    const data = await res.json()
    this.list = data
  }
generateElement(item){
      
      let tr = []
      let cell = null
      let span = null
    
      cell = document.createElement('td')
      span = document.createElement('span')
      span.innerText = item['first_name']
      cell.appendChild(span)
      tr.push(cell)
      
      cell = document.createElement('td')
      span = document.createElement('span')
      span.innerText = item['last_name']
      cell.appendChild(span)
      tr.push(cell)
      
      cell = document.createElement('td')
      span = document.createElement('span')
      span.innerText = item['role_display_name']
      cell.appendChild(span)
      tr.push(cell)
      
      cell = document.createElement('td')
      span = document.createElement('span')
      span.innerText = item['avail_status_name']
      cell.appendChild(span)
      tr.push(cell)
      return tr
    }
  render() {
    return (
      <div class="test-common-listing">
        <div class="header">
          <slot name="header" />
        </div>
        <table class="fixed_headers">
          <thead>
            <tr>
              {JSON.parse(this.columns).map(c => <th>{c.label}</th>)}
            </tr>
          </thead>
          <tbody>
            {
              this.filterList.map(l => <tr ref={nodeEle => {
                nodeEle.append(...this.generateElement(l))
              }}> </tr>)
            }
          </tbody>
        </table>
        <div>
          <test-pagination />
        </div>
        <div class="footer">
          <slot name="footer" />
        </div>
      </div>
    )
  }
}

在表体中，它使用以前的数据集呈现更新的数据，而不仅仅是新的数据集。

4

1 回答 1

0

由于该元素是手动添加到 nodeEle 的，因此必须在更新下面的代码解决这种情况之前将其删除。

<tbody>
            {
              this.filterList.map(l => <tr ref={nodeEle => {
                while (nodeEle.hasChildNodes()) {
                  nodeEle.firstChild.remove()
                }
                nodeEle.append(...this.generateElement(l))
              }}> </tr>)
            }
</tbody>
于 2021-06-23T09:04:07.537 回答