el-table增加多選框并在表頭增加全選字樣

本文旨在解決使用element-ui時在table中增加全選功能列,效果如圖所示:

image.png

實現(xiàn)方法:

1.手動添加一個el-table-column,設type屬性為selection即可

<el-table-column type="selection" width="100px"></el-table-column>

2.在el-table-column中設置label屬性并不會起作用,因此全選二字需要使用CSS來實現(xiàn)

.el-table__header .el-table-column--selection .cell .el-checkbox:after {
  color: #333;
  content: "全選";
  font-size: 16px;
  margin-left: 12px;
  font-weight: bold;
}
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容