element ui表格多选根据后端返回的数据回显多选

可以通过设置表格数据的 `selected` 属性来实现多选数据的回显。假设后端返回的数据中包含一个 `selectedIds` 数组，表示已选中的数据的 ID，可以先遍历表格数据，将每条数据的 `selected` 属性设置为 `selectedIds` 数组中是否包含该条数据的 ID，然后在表格上添加一个 `@selection-change` 事件监听器，当用户手动勾选或取消勾选表格中的数据时，将新的选中数据的 ID 存入 `selectedIds` 数组中。

以下是一个示例代码，假设表格数据包含 `id` 和 `name` 两个字段：

<template>
  <el-table :data="tableData" @selection-change="handleSelectionChange" :select-on-indeterminate="false" :default-sort="{prop: 'id', order: 'ascending'}" :row-key="row => row.id" v-loading="loading">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="id" label="ID" sortable></el-table-column>
    <el-table-column prop="name" label="Name" sortable></el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      tableData: []
    }
  },
  methods: {
    async fetchData() {
      this.loading = true;
      const response = await fetch('/api/data');
      const data = await response.json();
      this.tableData = data.map(item => ({
        ...item,
        selected: false
      }));
      const selectedIds = data.filter(item => item.selected).map(item => item.id);
      this.tableData.forEach(item => {
        item.selected = selectedIds.includes(item.id);
      });
      this.loading = false;
    },
    handleSelectionChange(selection) {
      const selectedIds = selection.map(item => item.id);
      this.tableData.forEach(item => {
        item.selected = selectedIds.includes(item.id);
      });
    }
  },
  mounted() {
    this.fetchData();
  }
}
</script>

在上面的示例代码中，`fetchData` 方法通过 AJAX 请求获取后端数据，并将每条数据的 `selected` 属性初始化为 `false`。然后遍历后端返回的数据，将已选中的数据的 `selected` 属性设置为 `true`。在表格上添加了一个 `selection-change` 事件监听器，当用户手动勾选或取消勾选表格中的数据时，将选中的数据的 ID 存入 `selectedIds` 数组中，并遍历表格数据，将新的选中数据的 ID 存入 `selectedIds` 数组中。