用途:antd的table合并单元格时,需要对单元格的元素改为html元素,同时添加一些事件行为。
绑定事件需要使用: onClick={() => this.DetailAdd(row)}
{
title: '仪器',
align: "center",
dataIndex: 'instrument',
customRender: (value, row, index) => {
var vm = this
// var child = vm.$createElement("a", {
// domProps: {
// innerHTML: value
// },
// on: {
// //左击
// click: function () {
// if (vm.editModal) {
// vm.DetailAdd(row);
// } else {
// }
// },
// //右击
// contextmenu: function (event) {
// if (vm.editModal) {
// vm.showTips(row);
// } else {
// }
// // 阻止浏览器的默认行为
// event.preventDefault();
// }
// }
// });
var childrenVal
childrenVal = (
<div>
<a-popover trigger="click">
<div slot="content" >
<a-button type="primary" onClick={() => this.DetailAdd(row)}>新增子项目</a-button>
<a-button type="primary" style="margin-left:8px;background-color:#8bc34a;border-color:#8bc34a">调整仪器</a-button>
<a-button type="danger" style="margin-left:8px;background-color:#ff7875;">删除仪器</a-button>
</div>
<a type="primary">
{value}
</a>
</a-popover>
</div >
)
const obj = {
children: childrenVal,
attrs: {}
};
const _row = this.instrumentRowArr[index];
obj.attrs = {
rowSpan: _row,
};
return obj;
},
},
参考:Antd表格customRender与scopedSlots同时使用_antd customrender-CSDN博客