elementui去除表格表头的多选按钮,设置多选表格为单选

更改表格多选为单选


问题描述: 项目开发过程中遇到将多选表格修改为单选的需求。实现了其功能便来记录一下。
解决方案:

  1. 将表头多选框全选功能关闭
  2. 将列表中的多选改为单选

实施代码:

<template>
 <el-table
   ref="multipleTable"
   :data="tableData"
   tooltip-effect="dark"
   :header-cell-class-name="cellClass"
   style="width: 100%"
   @select="handleSelect"
   @selection-change="handleSelectionChange">
   <el-table-column
     type="selection"
     width="55">
   </el-table-column>
   <el-table-column
     label="日期"
     width="120">
     <template slot-scope="scope">{{ scope.row.date }}</template>
   </el-table-column>
   <el-table-column
     prop="name"
     label="姓名"
     width="120">
   </el-table-column>
   <el-table-column
     prop="address"
     label="地址"
     show-overflow-tooltip>
   </el-table-column>
 </el-table>
 <div style="margin-top: 20px">
   <el-button @click="toggleSelection()">取消选择</el-button>
 </div>
</template>

<script>
 export default {
   data() {
     return {
       tableData: [{
         date: '2016-05-03',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1518 弄'
       }, {
         date: '2016-05-02',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1518 弄'
       }, {
         date: '2016-05-04',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1518 弄'
       }],
       multipleSelection: [],
       currentRow:{}
     }
   },

   methods: {
   	 // 禁用表格头部多选按钮
   	 cellClass(row){
     	if(row.columnIndex === 0){
       	  return 'disabledCheck'
     	}
   	 },
   	//多选改造单选
     handleSelect(selection, row) {
         if (selection.length > 1) {
           this.$refs.multipleTable.clearSelection();
           this.$refs.multipleTable.toggleRowSelection(selection.pop());
         } else {
           this.multipleSelection = selection;
         }
   
         this.setCurrentRow(row);
     },
     // 点击操作一栏设置当前操作行数据
   	 setCurrentRow(row) {
        this.currentRow = row;
     },
     toggleSelection(rows) {
       if (rows) {
         rows.forEach(row => {
           this.$refs.multipleTable.toggleRowSelection(row);
         });
       } else {
         this.$refs.multipleTable.clearSelection();
       }
     },
     handleSelectionChange(val) {
       this.multipleSelection = val;
     }
   }
 }
</script>
<style>
//关闭表头全选按钮
.el-table /deep/.disabledCheck > .cell .el-checkbox__inner{
   display: none !important;
   position: relative;
}
.el-table /deep/.disabledCheck > .cell::before{
   display: block;
   content:"";
   position: absolute;
   text-align: center;
   width: 100%;
}
</style>

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值