vue table 实现单选逻辑

最新推荐文章于 2025-07-04 20:26:00 发布

原创最新推荐文章于 2025-07-04 20:26:00 发布 · 1.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #vue.js

这篇博客介绍了如何在基于Element UI的表格组件中实现单选功能。通过添加type='selection'的列来实现勾选，然后结合table的toggleRowSelection方法和selection-change、row-click事件，确保每次只能选中一行。示例代码展示了如何处理用户的选择，以及如何在多选和单选之间切换。

table表格有时需要在每行前面添加一列实现可勾选对应行的状态，table默认是多选的逻辑，如果需要实现单选，需要结合table封装好的一些方法和事件

html部分：

  <el-table
            ref="multipleTable"
            :data="tableData"
            highlight-current-row
            @select-all="onSelectAll"
            @selection-change="selectItem"
            @row-click="onSelectOp"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="序号" type="index" align="center" />
            <el-table-column label="姓名" prop="name" align="center" />
            <el-table-column label="手机号码" prop="telephone" align="center" />
          </el-table>

js部分：

 methods: {
    onSelectAll() {
      this.$refs.multipleTable.clearSelection();
    },
    selectItem(rows) {
      if (rows.length > 1) {
        const newRows = rows.filter((it, index) => {
          if (index == rows.length - 1) {
            this.$refs.multipleTable.toggleRowSelection(it, true);
            return true;
          } else {
            this.$refs.multipleTable.toggleRowSelection(it, false);
            return false;
          }
        });
        this.multipleSelection = newRows;
      } else {
        this.multipleSelection = rows;
      }
      this.userId = this.multipleSelection.length
        ? this.multipleSelection[0].guid
        : "";
    },
    onSelectOp(row) {
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(row, true);
      this.multipleSelection = [];
      this.multipleSelection.push(row);
    },

    handleCheckChange(data, checked, indeterminate) {
      if (checked) {
        this.$refs.dataTree.setCheckedKeys([data.lobbyCode]);
      }
    },
}

multipleSelection变量用于保存用户当前勾选的选项