在表格列可以通过selection添加复选框,但是对于table的表头,添加复选框需要自定义

效果
在这里插入图片描述
这里主要通过运用element-ui中render-header的属性,在需要自定义的表头添加对应方法
在这里插入图片描述
html

<el-table-column prop="name" label="操作人" show-overflow-tooltip :render-header="renderHeader">
</el-table>

renderHeader方法

/** 表头增加复选框 */
    renderHeader (h, { column }) {
      return h(
        'span',
        [
          h('el-checkbox', {
            style: 'display:inline-flex;margin-right:15px;',
            on: {
              change: this.select
            }
          }),
          h('span', column.label)
        ]
      )
    },
    /** 是否勾选表头 */
    select (checked) {
      // 如果checked为true则是勾选了对应的表头
      console.log(checked)
    },

这里相当于createElement创建了新的dom节点自定义表头
select方法则可以判断是否勾选了对应的表头

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐