element-ui表格中复选框只能选中一个

最新推荐文章于 2026-03-10 03:11:55 发布

原创最新推荐文章于 2026-03-10 03:11:55 发布 · 6.9k 阅读

15 ·

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

收录于

vue

当前文章被收录于：

vue

11 篇文章 2 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何使用Element UI的多选表格组件进行数据选择和操作，包括限制选择数量、自定义单元格输入等高级功能。

代码：

<el-table
          ref="multipleTable"
          :data="updatetableData"
          style="width: 100%"
          @selection-change="updatehandleSelectionChange"
          @select="select"
          @select-all="selectAll"
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="name" label="精品名称"></el-table-column>
          <el-table-column prop="tag" label="排序">
            <template slot-scope="scope">
              <el-input v-model="scope.row.sort" />
            </template>
          </el-table-column>
        </el-table>

methods中：

select(selection, row) {
      if (selection.length > 1) {
        let del_row = selection.shift()
        this.$refs.multipleTable.toggleRowSelection(del_row, false)
      }
    },
selectAll(selection){
      if (selection.length > 1) {
        selection.length = 1
      }
    }