【element-plus】使用elTable设置默认全选toggleRowSelection失效

七月的冰红茶

已于 2023-12-28 17:19:01 修改

阅读量3.7k

点赞数

分类专栏：前端文章标签： vue.js javascript 前端 elementui

于 2023-11-05 21:57:04 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45406325/article/details/134234566

版权

前端专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何在Vue的ElementUI中使用el-table组件实现子节点数据的展开区域展示，包括设置默认展开第一条数据和使用复选框进行全选，以及处理数据切换时的选中状态刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目标效果：子节点数据通过展开区域展示，并且包含复选框，默认展示第一条数据的子节点并全选

图3-自定义布局

展开区域el-table-column type="expand"，注意放到表格第一行
默认展开第一条row-key和expand-row-keys搭配使用

:row-key="(row，index) => {
//当index获取无效，采用以下方法
          return tableData.indexOf(row);
 }"

复选框el-table-column type="selection"
设置全选使用toggleAllSelection

const multipleTable = ref();
const reserveSelection = () => {
  // console.log('multipleTable.value', multipleTable.value);
  // 默认选择第一条数据的children
  // const defaultSelect = tableData.value?.[0].children;
  // if (!defaultSelect) return;
  // defaultSelect.forEach((item) => {
  //	multipleTable.value.toggleRowSelection(item, true);
  // });
  multipleTable.value.toggleAllSelection();
};

渲染代码如下：

      <el-table
        :data="tableDate" :border="parentBorder"
        style="width: 100%" :row-key="(row) => {
          return tableDate.indexOf(row);
        }" :expand-row-keys="[0]">
        <el-table-column type="expand">
          <template #default="props">
            <el-table ref="multipleTable" :show-header="false" :data="props.row?.children" @select="selectQc" :select-default="true">
              <el-table-column type="selection" :align="'right'" width="100" />
              <el-table-column width="250" :formatter="(row) => {
                return row?.userRole?.name;
              }
                " />
              <!-- -->
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="ID" type="index" prop="index" :index="indexMethod" :align="'center'" width="60" />
        <el-table-column v-if="false" label="taskId" prop="taskId" />
        <el-table-column label="状态" type="state" prop="status" :align="'center'" width="160" :formatter="(row) => {
          return row?.status == '1' ? '未通过' : '通过';
        }" />
        <!-- -->
        <el-table-column>
          <template #default="scope">
            <div class="flex-row">
              <el-button color="#656A85" style="width: 78px"
                @click="handleImportQC(scope.$index, scope.row)">进入</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

补充：如果还是想通过toggleRowSelection实现指定行选中，可以尝试用计时器，以下方法是在切换分页的时候刷新选中状态，dom刷新比toggleRowSelection慢

//刷新数据的勾选|取消状态
const refreshSelectionState = () => {
  //计算选中数量和添加选中状态
  setTimeout(() => {
    //计时器解决toggleRowSelection失效问题
    selectCount.value = 0;
    const selectListIndex: number[] = [];
    workDataList.value.map((m: any, index: number) => {
      tableRef.value?.toggleRowSelection(m, m.selected);
      if (m.selected) {
        selectCount.value++;
        selectListIndex.push(index);
      }
    });
  }, 100);
};