zoukankan      html  css  js  c++  java
  • element-ui Checkbox 实现单选

    html 部分

    <el-table id="tables" ref="multipleTable" row-key="id" 
        :data="tableData" 
         max-height="450" 
         border 
         style=" 100%" 
         @selection-change="handleSelectionChange" //将用到此
         :header-cell-style="{background:'#F8F8FA',color:'#606266',fontSize:'13px',fontWeight:'bold'}"
       >
         <el-table-column type="selection" width="60" align="center" :reserve-selection="true"></el-table-column>
         <el-table-column prop="id" label="序号" width="120" align="center"> </el-table-column>
         <el-table-column prop="name" label="话题名称" align="center" show-overflow-tooltip> </el-table-column>
     </el-table>

    js部分

    handleSelectionChange(val) {
      if(val.length >=2){
         // 删除索引为0的
         // console.log(val.splice(0,val.length-1),'被删除的')
         let arrays = val.splice(0,val.length-1)
         arrays.forEach(row => {
           this.$refs.multipleTable.toggleRowSelection(row); //除了当前点击的,其他的全部取消选中
         })
      }
      // console.log(val,'最后得到的')this.array = val
    }
    <el-table id="tables" ref="multipleTable" row-key="id" :data="tableDatamax-height="450" border style=" 100%" @selection-change="handleSelectionChange" :header-cell-style="{background:'#F8F8FA',color:'#606266',fontSize:'13px',fontWeight:'bold'}">
                <el-table-column type="selection" width="60" align="center" :reserve-selection="true"></el-table-column>
                <el-table-column prop="id" label="序号" width="120" align="center"> </el-table-column>
                <el-table-column prop="name" label="话题名称" align="center" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="introduction" label="话题内容" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column prop="creatorName" label="创建人" align="center" show-overflow-tooltip> </el-table-column>
              </el-table>
  • 相关阅读:
    微信小程序授权获取用户详细信息openid
    微信开发之微信网页授权 完整示例
    linux 安装MySql 5.7.20 操作步骤【亲测】
    CentOS7下rabbitmq的详细安装教程
    Makefile:248: /usr/local/otp_src_18.1/make/x86_64-unknown-linux-gnu/otp_ded.mk: No such file
    Calendar的add()方法介绍
    怎样梳理属于自己的项目管理套路?
    项目经理必备9大获得领导支持秘技
    为什么绝大多数项目经理在不断救火?
    Java IO流学习总结
  • 原文地址:https://www.cnblogs.com/tlfe/p/12218272.html
Copyright © 2011-2022 走看看