el-table实现单选功能

最新推荐文章于 2024-07-18 18:02:30 发布

好耶

最新推荐文章于 2024-07-18 18:02:30 发布

阅读量918

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46229508/article/details/128552728

版权

文章介绍了如何在Vue.js应用中使用el-table组件，通过CSS将表头的复选框隐藏，并且绑定了@selection-change和@current-change事件来处理多选和单选行为。当多选超过一项时，会清除所有选择并只保留最后一个选项的勾选。同时，点击任何一行会自动勾选该行。

摘要由CSDN通过智能技术生成

首先，把全选框隐藏。

  .el-table__header-wrapper  .el-checkbox{
    //找到表头那一行，然后把里面的复选框隐藏掉
    display:none
  }

给el-table绑定@selection-change和@current-change事件

            <el-table height="250" :data="addButtonData.incomeRuleList" @selection-change="selectChargeRule" @current-change="currentChange" ref="selectChargeRuleRef">
              <el-table-column type="selection"></el-table-column>
              <el-table-column prop="id" label="规则ID"></el-table-column>
            </el-table>

    // 当多选时，去除全部选择，勾选最后一个选项
    selectChargeRule (val) {
      if (val.length > 1) {
        this.$refs.selectChargeRuleRef.clearSelection()
        this.$refs.selectChargeRuleRef.toggleRowSelection(val[val.length - 1])
      }
      this.selectedRule = val[val.length - 1]
    },
    // 点击一行的任意位置就勾选上
    currentChange (val) {
      this.$refs.selectChargeRuleRef.toggleRowSelection(val)
    },