Element-ui el-table component is selected and echoed

During development, I used the table component of Element-ui for development. I encountered the need for component echo. Let me briefly record it.

Demo

Directly upload the code

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    :row-key="(row) => row.id"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
    <el-table-column prop="id" label="id" width="120"></el-table-column>
    <el-table-column prop="name" label="name" width="120"></el-table-column>
    <el-table-column prop="address" label="address" show-overflow-tooltip></el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">Toggle the selection state of the second and third rows</el-button>
    <el-button @click="selectData()">Echo the selected data</el-button>
    <el-button @click="toggleSelection()">Cancel selection</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: Array.from({ length: 16 }).map((item, index) => {
        return {
          id: index,
          name: 'Wang Xiaohu' + index,
          address: 'Jinshajiang Road, Putuo District, Shanghai' + index
        }
      }),
      multipleSelection: Array.from({ length: 3 }).map((item, index) => {
        return {
          id: index + 3,
          name: 'Wang Xiaohu' + index + 3,
          address: 'Jinshajiang Road, Putuo District, Shanghai' + index + 3
        }
      }),
      rowSelectFlag: false // disable toggleRowSelection from triggering by default @selection-change
    }
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          // Switch selected state
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        // Clear selection
        this.$refs.multipleTable.clearSelection()
      }
    },
    // Echo the selected data
    selectData() {
      this.$nextTick(() => {
        this.rowSelectFlag = true
        const idList = this.multipleSelection.map((e) => e.id)
        this.tableData.forEach((row) => {
          if (idList.includes(row.id)) {
            this.$refs.multipleTable.toggleRowSelection(row, true)
          }
        })
        this.rowSelectFlag = false
      })
    },
    handleSelectionChange(val) {
      if (this.rowSelectFlag) return
      this.multipleSelection = val
    }
  }
}
</script>

Key points of implementation

Key points of component API

Table Attributes

parameter	illustrate	type	Optional value	default value
row-key	Key of row data, used to optimize the rendering of Table; this attribute is required when using the reserve-selection function and displaying tree data. When the type is String, multi-level access is supported: user.info.id, but user.info[0].id is not supported. In this case, please use Function.	Function(row)/String	–	–

Table-column Attributes

parameter	illustrate	type	Optional value	default value
type	Corresponding column type. If selection is set, the multi-select box is displayed; if index is set, the index of the row is displayed (calculated from 1); if expand is set, it is displayed as an expandable button	string	selection/index/expand	–
reserve-selection	Only valid for columns with type=selection, type is Boolean, if true, the previously selected data will be retained after the data is updated (row-key needs to be specified)	Boolean	–	false

Table Methods

method name	illustrate	parameter
clearSelection	Used for multi-select forms to clear user selections	–
toggleRowSelection	Used for multi-select tables to switch the selected state of a certain row. If the second parameter is used, it is to set whether this row is selected or not (selected is true to select)	row, selected
toggleAllSelection	Used for multi-select tables to switch the selected state of all rows	–

Echo details

1. Find the corresponding data from tableData and echo it

The selected value stored in the component is slightly different from the data structure that needs to be echoed (specifically why, please enlighten me), causing toggleRowSelection to not take effect, so the value is taken from the data to do the echo.

const idList = this.multipleSelection.map((e) => e.id)
<!-- Find the corresponding data from Data and echo it -->
this.tableData.forEach((row) => {
if (idList.includes(row.id)) {
   this.$refs.multipleTable.toggleRowSelection(row, true)
  }
})

1. toggleRowSelection solution to passively trigger the selection-change event

Scenario: The data returned by the interface needs to be selected by default in the list, and the toggleRowSelection method needs to be called. However, since the non-current page data is not in the data item, toggleRowSelection triggers the select event by default, causing the multi-selection array’s non-current page data to be deleted.

Solution: Lock

Note: The trigger timing of selectData should be determined according to business needs.

Examine the literature:

Solution for el-table toggleRowSelection to passively trigger select/selection-change events – CSDN Blog

vue + elementUI table multi-select box selection echo_vue + elementui, the table data added by editing is displayed and selected-CSDN Blog