首页 > 其他 > 详细

有这样一个需求 element +vue 实现显示的table 的表头添加一个添加图标, 并绑定一个点击事件,我查了好多资料, 终于找到table 表头的一个事件 :render-header 可以实现。

时间:2019-04-16 17:57:33      阅读:4885      评论:0      收藏:0      [点我收藏+]

  有这样一个需求   element +vue 实现显示的table 的表头添加一个添加图标, 并绑定一个点击事件,我查了好多资料, 终于找到table 表头的一个事件  :render-header 可以实现。

 

 

代码html 

 

              <el-table-column fixed="left" width="65px"  :render-header="renderHeader">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.$index, formDetail.taxEntityList)"
                                       size="small"><i class="el-icon-remove-outline"></i></el-button>
                        </template>
                    </el-table-column>
                </el-table>

  js:

methods: {
        renderHeader(h, { column, $index }){
            return h(‘div‘, null,[
                h(‘span‘,null,‘‘),
                h(‘i‘,{class :‘el-icon-circle-plus-outline‘, on:{
                    click: function () {
                        //vm.addRow();
                    }
                    }},‘‘
                )
            ])
        }
}

  js的意思 就是 添加 一个div 里面有个span  , span里面加一个<i class="el-icon-circle-plus-outline"></i>图片的class,on 后面的是绑定一个点击事件。

      蓝色的意思是每一行 有一个删除图片的按钮, 点击 删除

 

有这样一个需求 element +vue 实现显示的table 的表头添加一个添加图标, 并绑定一个点击事件,我查了好多资料, 终于找到table 表头的一个事件 :render-header 可以实现。

原文:https://www.cnblogs.com/laosunlaiye/p/10718546.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!