el-table 多选数据回显

el-table多选数据回显的方法有多种。其中一种方法是使用v-model指令来绑定选中的数据数组。在代码中的el-table-column中设置reserve-selection属性为true，这将保留之前选中的数据。然后，在el-table中使用@selection-change事件监听选中项的改变，通过handleSelectionChange方法来更新选中的数据数组。同时，可以使用this.$refs.multipleTable.toggleRowSelection(row, true)来实现将数据回显到el-table的多选框上。
在这个例子中，如果想要实现el-table多选数据的回显，可以通过以下步骤：
1. 在el-table中设置ref属性为"multipleTable"，以便在其他地方可以引用它。
2. 在el-table-column中设置type为"selection"，并将v-model指令绑定到展示在另一张页面的数据组上，同时设置reserve-selection属性为true。
3. 在el-table中使用@selection-change事件监听选中项的改变，并在handleSelectionChange方法中更新选中的数据数组。
4. 在需要回显数据的地方，使用this.$refs.multipleTable.toggleRowSelection(row, true)来将数据回显到el-table的多选框上。

相关问题

element-plus el-table 多选数据回显

在使用 element-plus 的 el-table 进行多选时，可以通过绑定一个对象来实现数据回显。具体实现方法如下：
1. 在获取表格数据时，将数据转化为一个以 id 为键，整个数据对象为值的字典对象。
2. 在获取回显数据时，将数据转化为一个以 deviceId 为键，整个数据对象为值的字典对象。
3. 在 el-table 的 @select 事件中，将选中的数据对象存入回显数据字典对象中。
4. 在 el-table 的 @select-all 事件中，遍历所有数据对象，将其存入回显数据字典对象中。
5. 在 el-table 的 :row-selected 事件中，根据回显数据字典对象中是否存在当前数据对象的 id 或 deviceId，来判断当前数据对象是否应该被选中。

具体代码实现可以参考以下示例：

<template>
  <el-table
    ref="tableRef"
    :data="tableData"
    @select="handleSelect"
    @select-all="handleSelectAll"
    :row-selected="isRowSelected"
    row-key="id"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column type="index" label="序号" width="150" />
    <el-table-column prop="name" label="电厂名称" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      selectedData: {}, // 回显数据
    }
  },
  methods: {
    // 获取表格数据
    async fetchData() {
      const res = await fetchTableData()
      this.tableData = res.data.reduce((dic, item) => {
        dic[item.id] = item
        return dic
      }, {})
    },
    // 获取回显数据
    async fetchSelectedData() {
      const res = await fetchSelectedData()
      this.selectedData = res.data.reduce((dic, item) => {
        dic[item.deviceId] = item
        return dic
      }, {})
    },
    // 处理单个选中事件
    handleSelect(selection, row) {
      this.$set(this.selectedData, row.deviceId, row)
    },
    // 处理全选事件
    handleSelectAll(selection) {
      Object.values(this.tableData).forEach(row => {
        this.$set(this.selectedData, row.deviceId, row)
      })
    },
    // 判断行是否被选中
    isRowSelected(row) {
      return !!this.selectedData[row.id || row.deviceId]
    },
  },
  mounted() {
    this.fetchData()
    this.fetchSelectedData()
  },
}
</script>

el-table 多选回显

el-table的多选回显可以通过以下步骤实现：
1. 重写表格的多选与全选方法，因为表格自带的切换分页会清空选择的数据。
2. 父组件传递选中的数据给子组件。
3. 对传递的数据进行重新组织，以适应采购单位列表的字段。
4. 使用表格数据回显方法来将数据显示在表格中。

在el-table中实现多选回显需要使用以下两个API：
1. 使用v-model指令来绑定一个展示在另一张页面的数据组，这样就能实现数据的回显。
2. 使用this.$refs.multipleTable.toggleRowSelection(row, true)方法来设置选中的行，其中传入的row是关联此el-table的data数组中的元素。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [el-table多选数据回显](https://blog.csdn.net/lxhmm921/article/details/123841658)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [el-table（type=“selection“）多选框两种回显](https://blog.csdn.net/qq_50276105/article/details/128307456)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]