Element-UI el-table 勾选中某一项 取消选中某一项

在 Element-UI 的 el-table 中，如果要实现勾选中某一项和取消选中某一项的功能，需要使用 el-table 的 selection 属性与 @selection-change 事件。

首先，在 el-table 标签中设置 selection 属性为一个数组，用来存储被勾选的行数据，如下所示：

<el-table :data="tableData" :selection="selectedList" @selection-change="handleSelectionChange">

其中，tableData 是 el-table 的数据源，selectedList 是存储被勾选的行数据的数组。

接下来，在 methods 中定义 handleSelectionChange 方法，用来处理勾选和取消勾选的逻辑，如下所示：

methods: {
  handleSelectionChange(selection) {
    this.selectedList = selection;
  }
}

在该方法中，我们将 el-table 的 selection 属性设置为传入的 selection 数组，这样就可以实现勾选和取消勾选的功能了。

如果需要在 el-table 中显示勾选框，可以使用 el-table-column 的 type 属性，如下所示：

<el-table-column type="selection" width="55"></el-table-column>

这样就可以在 el-table 的每一行前面显示一个勾选框了。同时，也可以在 el-table-column 中设置 selectable 属性，来控制某一行是否可以被勾选，如下所示：

<el-table-column type="selection" width="55" :selectable="row => row.status === 'active'"></el-table-column>

在该示例中，只有 row.status 属性值为 'active' 的行才能被勾选。