首页 前端知识 el-table组件多选实现单选功能

el-table组件多选实现单选功能

2024-04-21 10:04:50 前端知识 前端哥 775 419 我要收藏

el-table组件多选实现单选功能

在使用 el-table组件时为了实现仅能选中表格中的一条数据可将el-table组件多选功能进行改造,从而实现单选功能。

实现效果在这里插入图片描述

实现步骤

1、添加selection-change方法

<el-table
        ref="refsTable"
        :data="projectData"
        border
        v-loading="loading"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
  handleSelectionChange(selection) {
      this.ids = [];
      if (selection.length > 1) {
      //移除上一次选中行数据
        selection.shift();
        //修改选中图标为未选中状态
        this.$refs.refsTable.clearSelection();
        //将当前选中行改为选中状态
        this.$refs.refsTable.toggleRowSelection(selection[0]);
      }
    },

2、找到表头那一行,然后把里面的复选框隐藏掉

<style lang="scss" scoped>
/**找到表头那一行,然后把里面的复选框隐藏掉**/
::v-deep .el-table__header-wrapper .el-table__header .el-checkbox {
 	 display: none;
}
</style>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/5606.html
标签
评论
发布的文章

CSS(8)空间转换 动画

2024-04-29 12:04:29

CSS介绍(4)--背景属性

2024-04-29 12:04:26

Web学习记录---CSS(1)

2024-04-29 12:04:17

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!