vue增加按钮到表头单元格的解决方法

2018-10-03  本文已影响0人  爱余星痕

最近想在明细表中,增加一个增加按钮,记录方法如下:

  1. 修改表格的渲染方法
 <el-table
                                    :data="modalFormData.items "
                                    border
                                    style="width: 100%">
                                
                                <el-table-column label="操作"  :render-header="renderHeader"  >
                                    <template slot-scope="scope">
                                        <el-button-group>
                                            <el-button size="mini" type="danger" @click="renderRemoveRow(scope.$index)">
                                                删除
                                            </el-button>
                                        </el-button-group>
                                    </template>
                                </el-table-column>
                            </el-table>

上述render-header为单元格的自定义渲染

  1. 增加表格单元格的渲染方式
 renderHeader(h, params) {
                let a = [h('el-button', {
                    props: {
                        size: "mini",
                        type: "primary"
                    },
                    on: {
                        click: () => {
                            this.renderAddRow();
                        }
                    }
                }, '增加')];
                return h('div', a);
            },

至些,表格的单元格增加了添加按钮!

上一篇下一篇

猜你喜欢

热点阅读