el-table的type=“selection“实现单选

qzhcode

于 2023-04-25 15:42:52 发布

阅读量1.5k

点赞数

分类专栏： elementui 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_45880538/article/details/130366635

版权

elementui 专栏收录该内容

4 篇文章

订阅专栏

文章展示了如何在Vue项目中，使用ElementUI的el-table组件通过type=selection属性实现单选功能。关键在于监听selection-change事件，当选择项超过1个时，清除所有选择并切换到最后一个。同时，提供了CSS样式去除表头的复选框显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-table的type="selection"实现单选

利用监听table的selection-change方法，代码如下

     <el-table
        ref="table"
        :data="tableData"
        height="680"
        @selection-change='handleSelectionChange'
        @current-change='currentChange'
        :header-cell-style="{ color: '#359aca' }"
        stripe
        class='talbe1'
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="50"
        >
        </el-table-column>
        <el-table-column
          type="selection"
          width="55"
        ></el-table-column>
     </el-table>

//methods中的方法， selectObj 在data中声明
   handleSelectionChange(val) {
      if (val.length > 1) {
        this.$refs.table.clearSelection();
        this.$refs.table.toggleRowSelection(val[val.length - 1]);
      }
      this.selectObj = val[val.length - 1];
      if(!this.selectObj) {
        this.selectObj = {}
      }
    },

// 去掉head上面的复选框
.table {
    /deep/ thead {
      .el-table-column--selection {
        .cell {
          display: none;
        }
      }
    }
  }