vue elementui table回显

<template>
  <div>
    <el-button @click="openDialog">打开弹窗</el-button>
    <el-dialog :visible.sync="dialogVisible" width="50%">
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        ></el-table-column>
        <el-table-column
          prop="id"
          label="ID"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="名称"
        ></el-table-column>
      </el-table>
      <el-pagination
        @current-change="handlePageChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalItems"
      ></el-pagination>
      <div>选中的文本: {{ selectedText }}</div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [], // 表格数据
      selectedIds: [], // 选中的ID数组
      selectedText: '', // 选中的文本字符串
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的条目数
      totalItems: 0, // 总条目数
    };
  },
  methods: {
    // 打开弹窗
    openDialog() {
      this.dialogVisible = true;
      this.loadTableData();
    },
    
    // 加载表格数据
    loadTableData() {
      // 假设 fetchTableData 是一个异步方法，用于从API获取表格数据
      // 在这里，您需要根据您的实际需求实现这个方法
      this.fetchTableData(this.currentPage, this.pageSize).then(data => {
        this.tableData = data.items;
        this.totalItems = data.total;
        
        // 设置表格的选中状态
        this.$refs.multipleTable.clearSelection();
        this.selectedIds.forEach(id => {
          const row = this.tableData.find(row => row.id === id);
          if (row) {
            this.$refs.multipleTable.toggleRowSelection(row, true);
          }
        });
      });
    },
    
    // 处理checkbox变化
    handleSelectionChange(val) {
      this.selectedIds = val.map(item => item.id);
      this.selectedText = val.map(item => item.name).join('、');
    },
    
    // 处理翻页
    handlePageChange(val) {
      this.currentPage = val;
      this.loadTableData();
    },
    
    // 假设的异步方法，用于从API获取表格数据
    fetchTableData(page, pageSize) {
      // 替换为实际的API调用逻辑
      // 这里返回的是一个模拟的Promise
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            items: [
              // 假设的数据
              { id: 1, name: 'Item 1' },
              { id: 2, name: 'Item 2' },
              // ...更多数据
            ],
            total: 100, // 总条数
          });
        }, 500);
      });
    },
  },
  created() {
    // 可以在这里从本地存储或其他地方加载之前保存的selectedIds
    // 例如：
    // const savedIds = localStorage.getItem('selectedIds');
    // if (savedIds) {
    //   this.selectedIds = JSON.parse(savedIds);
    // }
  },
}

vue elementui 打开弹窗 弹窗里有table 勾选table里的checkbox 获得id的集合并把对应的文本用顿号隔开显示在页面 第二次点开table的时候 通过之前选中的id集合 回显被选中的checkbox状态 翻页的时候亦是如此