修改elementUI_table使用type="selection"中的头部标题

使用header-cell-class-name 给表头单元格设置一个className用于修改样式:

		<el-table
           ref="mulChoose"
           :data="chooseList"
           style="width: 100%"
           :row-style="{height:'46px'}"
           :cell-style="{padding:'0'}"
           :header-cell-class-name="cellClass"
           highlight-current-row
           height="500"
           tooltip-effect="dark"
           @select="selectRow">
           <el-table-column
             type="selection"
             width="50">
           </el-table-column>
         </el-table>

判断是否是表头:

		cellClass(row){
            console.log(row)
            if (row.columnIndex === 0) {
                return 'DisableSelection'
            }
        },

添加样式

.el-table .DisableSelection .cell .el-checkbox__inner{
        display: none;
        position: relative;
      }
      .el-table .DisableSelection .cell:before{
        content: "";
        position: absolute;
        // right: 11px;
      }

最终实现:
实现效果

发布了3 篇原创文章 · 获赞 0 · 访问量 31

猜你喜欢

转载自blog.csdn.net/weixin_44735916/article/details/104009571