element表格实现复选框单选

 

默认表格前面的复选框是可以选择多个,但有的需求是只能选择一个,

可以通过clearSelection和toggleRowSelection去实现,把当前选中的这条selected设置成true。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="same-table">
      <el-table
          :data="tableData"
          class="oneTabel"
          ref="multipleTable"
          border
          fit
          @selection-change="handleSelectionChange"
          @select-all="dialogCheck"
          @select="dialogCheck"
          style="width:100%;">
              <el-table-column type="selection" width="50"></el-table-column>
              <el-table-column type="index" width="60" label="序号"></el-table-column>
              <el-table-column prop="name" label="机构"></el-table-column>
              <el-table-column prop="negativeDec" label="负面清单描述"></el-table-column>
      </el-table>
  </div>

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
methods: {
       handleSelectionChange(val) {
            console.log(val, 'val')
            this.multipleSelection = val;
        },
        dialogCheck: function(selection, row) {
            console.log(selection, row);
            this.$refs.multipleTable.clearSelection()
            if (selection.length === 0) {
                return
            }
            if (row) {
                this.selectioned = row
                this.$refs.multipleTable.toggleRowSelection(row, true)
            }
        }
}

  

posted @   紫诺花开  阅读(927)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结
历史上的今天:
2020-01-30 Vue Cli3配置文件优化处理
2019-01-30 vue常用指令
2019-01-30 vue实现简单的全选、反选、不选
点击右上角即可分享
微信分享提示