el-table type="selection" 默认选中

最新推荐文章于 2025-06-12 13:58:55 发布

让时光到此为止。

最新推荐文章于 2025-06-12 13:58:55 发布

阅读量2.4w

点赞数 7

CC 4.0 BY-SA版权

分类专栏：应用场景文章标签： el-table selection

本文链接：https://blog.csdn.net/qq_35257117/article/details/96294240

应用场景专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何在Element-UI的el-table组件中实现所有行的默认全选功能。通过在el-table上添加ref属性，并利用Vue的$nextTick方法确保DOM更新后，调用toggleRowSelection方法来实现所有数据行的自动选择。

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

在使用 element-ui 的 el-table 时，每行的复选框默认是不选中的，但是需求要求它选中 O(∩_∩)O哈哈~

第一步： 在 el-table 中加ref 属性，它在vue中相当于是id的存在。 ref=“fileTable”

<el-table
  border
  ref="fileTable"
  :data="fileUploadData"
  class="table-reset"
  size="small"
  >
  <el-table-column align='center' width="40" fixed="left" type="selection"></el-table-column>
  <el-table-column v-for="(title, index) in fileTitle" :key="index" :prop="title.name" :label="title.name"  align='center'></el-table-column>
  <el-table-column width="70" fixed="right" label='选为标题'>
    <template slot-scope="scope">
      <span class="cbtn cbtn-yellow" @click="onTitle($event, scope.row)"></span>
    </template>
  </el-table-column>
</el-table>

**第二步：**在 created 中加上 this.$nextTick ，因为我们需要保证 .toggleRowSelection 在数据行已经渲染完成之后再执行，而vue默认会先解析js，再渲染页面。

this.$nextTick(() => {
   for (let i = 0; i < this.fileUploadData.length; i++) {
     this.$refs.fileTable.toggleRowSelection(this.fileUploadData[i])
   }
 })