整行操作，单选不选，用Element UI造个最强表格！

提升 Element UI 中 el-table 的自定义体验：实现整行操作、单选禁选和隐藏全选框

Element UI 的 el-table 是一款功能强大的 Vue 表格组件，深受开发者的青睐。然而，有时我们可能需要对其进行一些个性化定制，以满足特定业务需求。本文将详细介绍如何实现整行操作、单选禁选并隐藏全选框，让你的表格更加灵活易用。

一、整行操作

默认情况下，el-table 中的操作列会显示在每行末尾。但如果你需要让用户通过点击整行来触发操作，可以按照以下步骤进行设置：

1. 自定义表格行样式：

<el-table :data="tableData" row-class-name="custom-row-class">
  <!-- 表格内容 -->
</el-table>

2. 添加 CSS 样式：

.custom-row-class {
  cursor: pointer;
}

.custom-row-class:hover {
  background-color: #f5f5f5;
}

这样，表格行的样式就变成了鼠标悬停时显示浅灰色背景，点击时可以触发操作。

二、单选禁选

el-table 提供了 selection-type 属性，可以控制表格的行选择模式。要实现单选禁选，只需将 selection-type 设置为 "radio" 即可。

<el-table :data="tableData" :selection-type="'radio'" @selection-change="handleSelectionChange">
  <!-- 表格内容 -->
</el-table>

如果你还希望限制用户只能选择满足特定条件的行，可以结合 row-style 属性来实现。例如，你可以通过以下代码禁用某些行：

<el-table :data="tableData" :selection-type="'radio'" @selection-change="handleSelectionChange">
  <el-table-column
    prop="disabled"
    label="是否禁用"
    width="120"
    align="center"
    :row-style="{ background: disabled ? '#ccc' : '#fff' }"
  >
    <template slot-scope="scope">
      <el-checkbox v-model="scope.row.disabled" disabled></el-checkbox>
    </template>
  </el-table-column>
  <!-- 其他表格列 -->
</el-table>

在这个例子中，我们添加了一列名为 "是否禁用" 的列，并通过 row-style 属性设置了禁用的行显示灰色背景。这样，当用户尝试选择禁用的行时，表格会自动禁用该行的复选框。

三、隐藏全选框

最后，我们来隐藏全选框。全选框默认显示在表格左上角，可以通过 show-header 属性来控制其显示。要隐藏全选框，只需将 show-header 设置为 false 即可。

<el-table :data="tableData" :selection-type="'radio'" @selection-change="handleSelectionChange" show-header="false">
  <!-- 表格内容 -->
</el-table>

这样，全选框就会消失，让表格看起来更加简洁。

结论

通过以上简单的设置，你可以轻松地为 Element UI 的 el-table 表格添加整行操作、单选禁选和隐藏全选框等自定义功能。这些功能可以极大地提升表格的易用性和灵活性，让你轻松构建满足业务需求的高效表格。

常见问题解答

1. 如何在整行操作中传递行数据？

你可以通过 @row-click 事件处理器来获取当前点击行的完整数据。例如：

<el-table :data="tableData" row-class-name="custom-row-class" @row-click="handleRowClick">
  <!-- 表格内容 -->
</el-table>

2. 如何禁用整行操作中的特定行？

你可以通过 @row-click 事件处理器中的条件判断来实现。例如：

handleRowClick(row) {
  if (row.disabled) {
    return; // 阻止操作
  }
  // 执行操作
}

3. 如何在单选禁选中使用自定义条件？

你可以通过 @selection-change 事件处理器中的条件判断来实现。例如：

handleSelectionChange(selection) {
  if (!selection.some(item => item.disabled)) {
    return; // 允许选择
  }
  // 提示用户无法选择禁用的行
}

4. 如何在隐藏全选框后仍能使用分页功能？

你可以使用 pagination 属性来启用分页。例如：

<el-table :data="tableData" :selection-type="'radio'" @selection-change="handleSelectionChange" show-header="false" :pagination="true">
  <!-- 表格内容 -->
</el-table>

5. 如何在单选禁选模式下实现批量删除功能？

你可以使用 @selection-change 事件处理器来收集选中的行数据，然后进行批量删除操作。例如：

handleSelectionChange(selection) {
  // 收集选中的行数据
  const selectedRows = selection.filter(item => !item.disabled);

  // 执行批量删除操作
  // ...
}