vue + element---plus 表格复选框回显

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    ref="multipleTable"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      selectedRows: [], // 已选行id数组
    };
  },
  methods: {
    // 数据初始加载后，可以根据已选行id数组回显复选框
    loadTableData() {
      // 模拟从API获取数据
      this.tableData = [
        // ...获取到的数据
      ];
      // 回显复选框
      this.tableData.forEach(row => {
        if (this.selectedRows.includes(row.id)) {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        }
      });
    },
    handleSelectionChange(selection) {
      // 当复选框选项变化时更新已选行id数组
      this.selectedRows = selection.map(item => item.id);
    },
  },
  mounted() {
    this.loadTableData();
  },
};
</script>

方法二

//vue3写法
import { ref, reactive, defineProps, defineEmits, nextTick } from 'vue'

const multipleTable = ref(null)
const comonArr = ref([])
nextTick(() => {
    comonArr.value.forEach((row) => {
        const row = tableData.find((f) => f.id = row)
        multipleTable.toggleRowSelection(row, true);
    });
})

原文地址：https://blog.csdn.net/weixin_54514048/article/details/142859613

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！