El-table 表头添加全选按钮

如下图，我们要在自定义的列添加个checkbox,也可以是button 等其他组件。

支持多列 支持多列 支持多列，支持多种组件，支持多种组件，支持多种组件

使用：   :render-header 动态渲染方法实现。

实现代码片段：

1、在需要的列，添加:render-header="renderHeader"

<el-table ref="dragTable" :data="fchInfo.fields" style="width: 99%" stripe border row-key="index" :height="tableHeight" min-height="750" highlight-current-row :cell-class-name="tableCellClassName" @cell-click="cellClicKey">
       

 <el-table-column prop="nullAble" label="非空" align="center" width="60px" :render-header="renderHeader">
                <template slot-scope="scope">
                    <!-- <el-switch v-model="scope.row.nullAble"> </el-switch> -->
                    <el-checkbox v-model="scope.row.nullAble"> </el-checkbox>
                </template>
            </el-table-column>

            <el-table-column prop="isTable" label="列表" align="center" width="60px" :render-header="renderHeader">
                <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.isTable"> </el-checkbox>
                </template>
            </el-table-column>

</el-table>

2、添加 渲染方法renderHeader()，并且添加onChange() 事件的方法changeSelAll。可以带变量给到调用的方法,修改数组所在列的值。

      
methods: {
/**  渲染表头 */
 renderHeader(h, { column, $index }) {
     //column 列属性
            var property = column.property;
            return (
                <div>
                    <span>{column.label}</span>
                    <el-checkbox
                        type="primary"
                        style="padding:3px;margin-left:5px"
                        size="mini"
                        //加入点击事件---------
                        onChange={(val) => this.changeSelAll(val, column)}
                    //---------------------
                    ></el-checkbox></div>
            )
        },


       /**全选，反选事件 */
        changeSelAll(val, column) {
            this.fchInfo.fields.forEach(e => {
                e[column.property] = val;
            })

        }

}

效果如图所示。