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

图3-自定义布局

  1. 展开区域el-table-column type="expand",注意放到表格第一行
  2. 默认展开第一条row-keyexpand-row-keys搭配使用
:row-key="(row,index) => {
//当index获取无效,采用以下方法
          return tableData.indexOf(row);
 }"
  1. 复选框el-table-column type="selection"
  2. 设置全选使用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);
};
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45 5 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐