vxe-table插件手册:https://xuliangzhan_admin.gitee.io/vxe-table/#/table/base/basic
模板:
<vxe-grid
resizable
ref="tableVxe"
border
stripe
highlight-hover-row
:tooltip-config="{theme: 'light'}"
show-overflow
class="vxe-table-iview"
height="414"
size="mini"
empty="暂无数据"
@select-change="selectChangeVxe"
@select-all="selectChangeVxe"
@sort-change="sortDataVxe"
:remote-sort="true"
:data="ordDataNow"
:columns="orderColumns"></vxe-grid>
配置:
orderColumns: [
{
title: '收货人电话',
key: 'receiverPhone',
field: 'receiverPhone',
align: 'center',
width: 100,
funcName: 'receiverPhone',
render: orderColumnsFunc.receiverPhone, // 引入【外部方法】更整洁和灵活
slots: orderColumnsFunc.slots
// formatter: (params) => { // 此处开始引入【外部方法】
// let text = params.row.receiver.phone
// return text
// }
// slots: {
// default: (params, h) => {
// let text = params.row.receiver.phone
// return [h('span', {
// attrs: {
// title: text
// }
// }, text)]
// }
// }
}
]
外部方法:
let orderColumnsFunc = {
receiverPhone: (h, params) => {
let text = params.row.receiver.phone
return h('span', {
attrs: {
title: text
}
}, text)
},
slots: {
default: (params, h) => {
let _func = orderColumnsFunc[params.column.own.key](h, params)
return _func instanceof Array === false ? [_func] : _func // 处理iview返回已经是数组格式的情况
}
}
}