vue+elementUI表格多选样式单选效果暴改

/ 0评 / 0

先上一张官方文档的图

需求背景:由于公司后台注重统一化,一些表格数据会用到多选、单选需求,保持UI不变;

1.首选我们需要把左上角“全选”按钮去掉;

需要在el-table加 class  //例如: radio-table
//css
 .radio-table thead .el-table-column--selection  .cell{
      display: none;
  }

2.在el-table标签加以下属性;


 <el-table  @select="handleChange" ref="radioTable"></el-table>

//methods
handleChange(selection,row){
  this.$refs.radioTable.clearSelection();
  if (selection.length === 0) { // 判断selection
   return;
  };
  this.$refs.radioTable.toggleRowSelection(row, true);
  this.selectData = row; //row就是单选中的数据
}

如有错误,欢迎留言纠正!

发表评论

您的电子邮箱地址不会被公开。