官方例子:Vxe Table v3.8
{ field: 'num1', title: 'Num1', showHeaderOverflow: true, filters: [{ data: '' }], editRender: { autofocus: '.my-input' }, slots: { // 使用插槽模板渲染 default: 'num1_default', header: 'num1_header', footer: 'num1_footer', filter: 'num1_filter', edit: 'num1_edit' } }, { field: 'address', title: 'Address', showOverflow: true, slots: { // 使用 JSX 渲染 default: ({ row }) => { return [ <span style="color: blue" onClick={ () => this.addressClickEvent(row) }>自定义模板内容</span> ] } } },
自定义的用法
for (var item of tabhead) {
if (item.children != undefined && item.children != null) {
for (var subItem of item.children) {
//xsje销售金额
if (subItem.field == 'xsje') {
this.configData[subItem.field]=subItem.routerpath;
subItem.slots = {
// 使用 JSX 渲染
default: ({ row , column }) => {
return [
<span style="color: blue;text-decoration:none;cursor:pointer;" onClick={() => {
var routerpath = this.configData[column.field];
this.$refs.detailDailog.open(routerpath);
}}>{row.xsje}</span>
]
}
}
}
}
}
}
this.tableColumns = tabhead