<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-
Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="/radar/vue/css/theme-chalk.css">
<link rel="stylesheet" href="/radar/vue/css/vxe-pc-ui-3.6.0.css">
<link rel="stylesheet" href="/radar/vue/css/vxe-table-3.15.21.css">
<script src="/radar/vue/js/vue.js"></script>
<script src="/radar/vue/js/vxe-table-3.15.21.js"></script>
<script src="/radar/vue/js/xe-utils-3.7.4.js"></script>
</head>
<body>
<div id="pageInfo" style="width: 100%;height:100%;">
<el-card class="box-card">
<vxe-grid ref="xGrid" v-bind="gridOptions">
<template #name_default="{ row }">
<span v-if="row.isMaster" style="color:red">★</span>
<span>{{ row.name }}</span>
</template>
</vxe-grid>
</el-card>
</div>
<script>
new Vue({
el: '#pageInfo',
data() {
return {
gridOptions: {
border: true,
resizable: true,
showOverflow: true,
keepSource: true,
height: 'auto',
rowId: 'id',
pagerConfig: {
pageSize: 10,
pageSizes: [10, 20, 50]
},
checkboxConfig: {
checkField: 'checked',
trigger: 'row',
checkMethod: ({ row, $rowIndex, $columnIndex }) => {
return !row.disabled
}
},
sortConfig: {
remote: true,
trigger: 'cell',
defaultSort: {field: 'name', order: 'asc'}
},
filterConfig: {
remote: true
},
columns: [
{ type: 'checkbox', width: 60, fixed: 'left' },
{ type: 'seq', width: 60, fixed: 'left' },
{
field: 'name',
title: '设备ID',
width: 120,
fixed: 'left',
filters: [
{ data: '' }
],
filterMethod:({ value, row, column }) => {
return value ? String(row.name).includes(String(value)) : true
}
},
{
field: 'stationType',
title: '基站类型',
width: 100,
filters: [
{label: '车载站', value: 'vehicle'},
{label: '机载站', value: '
airborne'},
{label: '背负站', value: 'backpack'},
{label: '舰载站', value: 'shipborne'},
{label: 'ATG', value: 'atg'}
],
filterMultiple: true
},
{
field: 'model',
title: '基站型号',
filters: [
{ data: '' }
],
filterMethod: ({value, row}) => {
return row.model.includes(value)
}
},
{
field: 'manufacturer',
title: '设备厂家',
filters: [
{ data: '' }
],
filterMethod: ({value, row}) => {
return row.manufacturer.includes(value)
}
},
{
field: 'power',
title: '发射功率(W)',
sortable: true,
filters: [
{ data: { type: 'number' } }
]
},
{
field: 'militaryType',
title: '军兵种',
filters: [
{ data: '' }
]
},
{
field: '
firstNode',
title: '一级节点',
filters: [
{ data: '' }
]
},
{
field: 'secondNode',
title: '二级节点',
filters: [
{ data: '' }
]
}
],
data: []
},
selectedIds: []
}
},
mounted() {
this.loadData();
},
methods: {
loadData() {
// 模拟API请求
axios.get('/api/devices').then(res => {
this.gridOptions.data = res.data.map(item => ({
...item,
checked: this.selectedIds.includes(item.id),
disabled: this.selectedIds.includes(item.id)
}));
});
},
handleFilterChange() {
this.$refs.xGrid.commitProxy('filter');
}
}
});
</script>
</body>
</html>
中国华东地区因疑似军事演练封锁航道，导致香港及深圳至上海、浙江等地连续两日有大批航班出现延误，每天逾万名深圳旅客受影响。港龙航空确认11月18日至25日期间因厦门附近军事演习实施流量控制。
扫一扫
3205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
