效果图：
<Table :columns="columns" :data="tableData" size="small" ref="table" :border="false"
@on-sort-change="tableSort">
</Table>
return 定义如下：
columns: [
{
type: 'expand',
width: 50,
render: (h, params) => {
return h(expandRow, {
props: {
row: params.row
}
})
}
},
{
"title": "船公司Id",
"key": "carrier",
"min-width": 150,
"align": 'center',
},
{
"title": "船公司名称",
"key": "carrierNameCn",
"min-width": 150,
"align": 'center',
},
{
"title": "船名",
"key": "vesselNameCn",
"min-width": 150,
"align": 'center',
},
{
"title": "航次",
"key": "voyageCode",
"min-width": 150,
"align": 'center',
},
{
"title": "装货港名称",
"key": "polCn",
"min-width": 150,
"align": 'center',
},
{
"title": "卸货港名称",
"key": "podCn",
"min-width": 150,
"align": 'center',
},
{
"title": "航线方式",
"key": "zdorzz",
"min-width": 150,
"align": 'center',
filters: [
{
label: '直达',
value: "ZD"
},
{
label: '中转',
value: "ZZ"
}
],
filterMultiple: false,
filterRemote(value, row) {
this.zdorzz = value[0]
this.searchServiceList() // 调用查询列表接口
},
render: (h, params) => {
return h('div', [
h('span', {
style: {
color: '#000000'
}
}, params.row.zdorzz = 'ZD' ? '直达' : '中转'),
])
}
},
{
"title": "船舶状态",
"key": "show",
"min-width": 150,
"align": 'center',
filters: [
{
label: '离港',
value: "D"
},
{
label: '到岗',
value: "A"
}
],
filterMultiple: false,
filterRemote(value, row) {
this.dora = value[0]
this.searchServiceList() // 调用查询列表接口
},
render: (h, params) => {
return h('div', [
h('span', {
style: {
color: '#000000'
}
}, params.row.show = 'D' ? '离港' : '到岗'),
])
}
},
{
"title": "航程",
"key": "sailingDays",
"min-width": 150,
"align": 'center',
"sortable": true,
},
{
"title": "预计离港时间",
"key": "etd",
"min-width": 150,
"align": 'center',
"sortable": true,
},
// {
// "title": '操作',
// "key": 'action',
// "min-width": 120,
// "align": 'center',
// render: (h, params) => {
// return h('div', [
// h('Button', {
// props: {
// type: 'text',
// size: 'small'
// }
// }, 'View'),
// h('Button', {
// props: {
// type: 'text',
// size: 'small'
// }
// }, 'Edit')
// ]);
// }
// }
],
methods
tableSort(val) {
console.log(val);
if (val.column.key == "sailingDays") {
if (val.column.key == "asc") {
this.orderBy = "SAILING_DAYS"
} else {
this.orderBy = "SAILING_DAYS DESC"
}
} else if (val.column.key == "etd") {
if (val.column.key == "asc") {
this.orderBy = "ETD"
} else {
this.orderBy = "ETD DESC"
}
}
this.searchServiceList()
},
// 筛选触发的函数
filterOperateType(filters, row, column) {
let type = Object.keys(filters)
if (type[0] == 'serviceType') {
this.serviceType = filters.serviceType[0];
}
else if (type[0] == 'userType') {
this.userType = filters.userType[0];
}
this.searchServiceList()
},
