Ant Design Vue implements Table adding total rows

Wechat official account: [Dafront-end Yizhan] Follow Dafront-end Yizhan. Questions or suggestions, welcome the public account message.

This is the 9th day of my participation in the August Wen Challenge.More challenges in August

background

Recently, I met a requirement to add a total line at the end of the table. The project was built with Vue2.0 and the UI framework was Ant Design Vue. Therefore, the first step was to check the official website to see if there was a suitable example. Then I asked baidu if there were any relevant blog articles. I found a good article about React project and gave a general idea. In line with the principle of accumulating knowledge, we still record it in Vue.

Implementation requirements

Solution a:

Generally speaking, the data of the total is calculated by the back-end and transmitted to the front-end. What we need to do is to add the data of the total to the end of the table data, and the total line will be displayed in the form of the body of the table

This one’s a little bit easier, just go to the code

<template> <a-table :columns="columns" :data-source="data" /> </template> <script> const columns = [ { title: {title: 'Name', dataIndex: 'Name',}, {title: 'Age', dataIndex: 'Age',}, {title: 'Name', dataIndex: 'Age',}, {title: 'Name', dataIndex: 'Age',}, {title: 'Name', dataIndex: 'Age',}, {title: 'Address', dataIndex: 'address', }, ]; const data = []; for (let i = 0; i < 5; i++) { data.push({ key: i+1, name: `Edward King ${i}`, age: 32, address: `London, Park Lane no. ${i}`, }); } // Push ({key: 'add ', name: ', age: 1000, address: '', }) export default { data() { return { data, columns, selectedRowKeys: [], // Check here to configure the default column }; }}; </script>Copy the code

Results the following

Scheme 2:

Ant Design Vue provides a table footer property that we use to implement this

Build aggregate data

computed: {
  footerDataSource () {
    const summary = Object.assign({}, this.data[0])
    for (const attr in summary) {
      summary[attr] = '合计'
      break
    }
    return [summary]
  }
}
Copy the code

The footerDataSource column is an array. The footerDataSource column is an array. The footerDataSource column is an array. Because the principle of a footer is just another Table to add

Footer is a function or slot-scope that returns another table

handleFooter () {
  return (
    <a-table
      rowKey={Math.random}
      bordered={false}
      pagination={false}
      columns={columns}
      dataSource={this.footerDataSource || []}
      showHeader={false}
    ></a-table>
  )
}
Copy the code

The columns attribute of the table is the same as the original table. The footerDataSource is the total data passed by the back end

Bind the Footer property

<template>
  <a-table :columns="columns" :data-source="data" :footer="handleFooter" />
</template>
Copy the code

Note: the footer is creating a table, so it will appear inconsistent with the original table. In this case, we need to fix the width of each item in the data. Default width=’auto’.

Const columns = [{title: 'column ', dataIndex: 'key', width: '25%'}, {title: 'Name', dataIndex: 'Name', width: '25%' }, { title: 'Age', dataIndex: 'age', width: '25%' }, { title: 'Address', dataIndex: 'address', width: '25%' }, ]Copy the code

However, the number of columns in a table is usually not fixed, and the business usually involves adding or deleting columns, so the width usually needs to be calculated by the program. The best way is to write it in the handleFooter method

HandleFooter () {// Handle width as a percentage, default 'auto' calculates width according to text, Columns = this.columns columns. ForEach (col => {col.width = (100 / columns. Length) + '%'}) return const columns = this.columns columns ( <a-table rowKey={Math.random} bordered={false} pagination={false} columns={columns} dataSource={this.footerDataSource || []} showHeader={false} ></a-table> ) }Copy the code

Footer mode effect

[Share, like, watch] Let more people join us