iview的table：自定义table表格中列头的标题和点击事件

最新推荐文章于 2025-10-08 05:06:52 发布

原创最新推荐文章于 2025-10-08 05:06:52 发布 · 4.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前段 #vue #iview #table #iview的table

iview 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了在前端开发中如何使用Vue.js框架自定义表格的列头和单元格渲染，通过实例展示了如何实现全选功能及单元格内的复选框交互。文章深入解析了Vue组件的props和事件绑定机制，以及如何通过自定义渲染函数提升用户体验。

{
title: ‘’,
width: 125,
type: ‘check’,
align: ‘center’,
key: ‘check’,
ref: " chargeAgainstRadio",
render: (h, params) => {
return h(‘Checkbox’, {
props: {
type: ‘text’,
value: params.row.check = this.chargeAgainstRadio
},
on: {
‘on-change’: (value) => {
// alert(params.index);
this.show(params.index);
}
},
});
},
//自定义列头的renderHeader函数
renderHeader: (h, index) => {
return h(‘div’, {
domProps: {
title: ‘点击全选’,//鼠标经过的提示信息
type: ‘selection’,
innerHTML: ‘是否冲抵(全选)’ //自定义的列头的标题
},
on: {
click: () => { //自定义列头的点击事件
this.allChangeAgainst(this.allCharge);
}
}
});
}
},