### 实现
Element UI 表格
单选功能
为了将
Element UI 的
多选表格改为支持
单选的功能，可以通过监听 `
selection-change` 事件并手动控制
选中逻辑来实现。以下是具体的解决方案：
#### 方法一：通过 JavaScript 控制
选中行为
可以在 `s
electCur` 函数中清除之前的
选中项，并仅保留当前行的
选中状态。
```javascript
methods: {
s
electCur(val, row) {
console.log(val, 'val'); // 当前
选中的数据
console.log(row, 'row'); // 当前行的数据
this.$refs.s
elect
Table.clear
Selection(); // 清除所有已
选项
this.$refs.s
elect
Table.toggleRow
Selection(row, true); // 设置当前行为唯一
选中项
}
}
```
上述代码实现了当用户点击某一行时，先清空之前所有的
选中状态，再单独设置该行为新的
选中状态[^1]。
#### 方法二：绑定 `@
selection-change` 事件处理逻辑
如果需要更灵活的方式，则可以利用 `@
selection-change` 事件监听器，确保每次只允许有一个
选中项。
```html
<
el-table ref="s
elect
Table" :data="
tableData" @
selection-change="handle
SelectionChange">
<
el-table-column type="
selection" width="55"></
el-table-column>
<!
-- 其他列
-->
</
el-table>
```
对应的 Vue 方法如下：
```javascript
data() {
return {
currentRow: null // 存储当前
选中的行
};
},
methods: {
handle
SelectionChange(
selection) {
if (
selection.length > 0) {
const s
electedRow =
selection[
selection.length
- 1]; // 获取最新
选中的行
this.currentRow = s
electedRow;
// 如果有
多余的
选择，移除它们
if (this.$refs.s
elect
Table) {
this.$refs.s
elect
Table.clear
Selection();
this.$refs.s
elect
Table.toggleRow
Selection(s
electedRow, true);
}
}
else {
this.currentRow = null; // 取消
选中时重置存储变量
}
}
}
```
这种方法能够有效防止
多个项目同时被
选中，从而达到
单选的效果[^4]。
#### 自定义样式（可
选）
对于某些特殊需求，可能还需要调整禁用状态下
单选框的表现形式。这可以通过
覆盖默认 CSS 或者使用插槽来自定义渲染内容完成[^2]。
---
### 示例完整代码片段
以下是一个完整的示例代码，展示了如何结合以上两种方式构建一个具有
单选功能的
Element UI 表格：
```vue
<template>
<div>
<
el-table
ref="s
elect
Table"
:data="
tableData"
style="width: 100%"
@
selection-change="handle
SelectionChange"
>
<
el-table-column type="
selection" width="55"> </
el-table-column>
<
el-table-column prop="name" lab
el="Name" width="180"> </
el-table-column>
<
el-table-column prop="address" lab
el="Address"> </
el-table-column>
</
el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: "John", address: "New York" },
{ name: "Doe", address: "Los Ang
eles" },
{ name: "Jane", address: "Chicago" }
],
currentRow: null,
};
},
methods: {
handle
SelectionChange(
selection) {
if (
selection.length > 0) {
const s
electedRow =
selection[
selection.length
- 1];
this.currentRow = s
electedRow;
if (this.$refs.s
elect
Table) {
this.$refs.s
elect
Table.clear
Selection();
this.$refs.s
elect
Table.toggleRow
Selection(s
electedRow, true);
}
}
else {
this.currentRow = null;
}
}
}
};
</script>
```
此代码不仅提供了基本的
单选功能，还包含了简单的表头配置以及基础样式的应用[^3]。
---
扫一扫
5878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
