Small knowledge, big challenge! This article is participating in the creation activity “Essential Knowledge for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money

preface

Recently, a new requirement was added to the table for all modules, so I immediately opened the Ant Design Vue website, but to my surprise, there is no component library for the React version. Looking through the API, I finally found one that I could use

Results show

Let’s look at the effect first

Code implementation

To achieve this effect, we need to use the FOOter API, essentially rendering a new table embedded in the tail

structure

    <a-table
        :bordered="false"
        rowKey="uid"
        size="small"
        :footer="handleFooterShow"
        :data-source="table.data"
        :pagination="table.pagination"
        :loading="table.loading"
        @change="pageChange"
        :columns="columns"
    >
    </a-table>
Copy the code

methods

Prepare a handleFooterShow method,

handleFooterShow() {
       const columns = this.columns
       columns.forEach(item= > {
           item.width = (100 / columns.length) + The '%'
       })
      return (
        <a-table
          rowKey={Math.random}
          bordered={false}
          pagination={false}
          columns={this.columns}
          dataSource={this.footerDataSource}
          showHeader={false}
          size="small"
        >
        </a-table>
      );
    },
Copy the code

DataSource ** dataSource is an array of length 1 (provided by the back end, slightly processed by the front end). The format is the same as the original table data. Columns are the same as colums in data.

One thing to note here is that this method traverses colums and assigns the width property to make colums equal, to avoid column misalignment between the trailing table and the original table. This is a lazy way to do it if the columns are equally divisible.

There is also a case where there are not many columns in the table and the width is required to be distinct. In this case, set width separately for each item and set the total to 100%. If the total is more than 100%, the scroll bar will appear, which is not beautiful.

data

columns:[
            {
              title: 'number'.dataIndex: 'uid'.width: '20%'
            },
            {
              title: 'Battalion'.dataIndex: 'dd'.width: '80%'},]Copy the code

The dataSource data source

Using computed properties

computed: {
  footerDataSource () {
      let summary = Object.assign({}, this.footData[0])
      for (let item in summary) {
        summary[item] = 'together'
        break
      }
      return [summary]
    }
  },
Copy the code

Enclosing footData [0] is the back-end returned to aggregate data, in array the first operation, in the first paragraph is revised as’ total ‘return to the new array, congrats!