Element-UI表格组件实现默认全选功能教程

Element-UI 表格组件默认勾选全部内容教程

Element-UI 中的 el-table 组件默认情况下，checkbox 列不会自动勾选全部行。如果需要实现勾选全部行的功能，可以通过以下步骤实现：

在表头中添加一个全选的 checkbox，例如：

<el-table-column type='selection' width='55'>
  <template slot-scope='{selection}'>
    <el-checkbox v-model='selectAll' @change='handleSelectAll'></el-checkbox>
  </template>
</el-table-column>

其中，selectAll 为一个 Boolean 类型的变量，表示是否全选，handleSelectAll 为一个方法，用于处理全选的逻辑。

在表格数据中添加一个 selected 属性，用于表示该行是否被选中，例如：

[
  {
    name: 'John',
    age: 18,
    selected: false
  },
  {
    name: 'Jane',
    age: 22,
    selected: false
  }
]

在 handleSelectAll 方法中，遍历表格数据，将每一行的 selected 属性设置为 selectAll 的值，例如：

handleSelectAll() {
  this.tableData.forEach(item => {
    item.selected = this.selectAll
  })
}

在表格中使用 selected 属性来绑定每一行的勾选状态，例如：

<el-table-column type='selection' width='55'>
  <template slot-scope='{row}'>
    <el-checkbox v-model='row.selected'></el-checkbox>
  </template>
</el-table-column>

这样，就可以实现表格中勾选全部行的功能了。