fix: 终端-PCC信息,展示信息列宽可以调整

This commit is contained in:
TsMask
2024-04-01 16:00:19 +08:00
parent 075ad76d19
commit ffd1b02bf9

View File

@@ -1,10 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'; import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout'; import { PageContainer } from 'antdv-pro-layout';
import { message, Modal, Form } from 'ant-design-vue/lib'; import { message, Modal, Form, TableColumnsType } from 'ant-design-vue/lib';
import { SizeType } from 'ant-design-vue/lib/config-provider'; import { SizeType } from 'ant-design-vue/lib/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table';
import UploadModal from '@/components/UploadModal/index.vue'; import UploadModal from '@/components/UploadModal/index.vue';
import { import {
listRules, listRules,
@@ -71,7 +70,7 @@ let tableState: TabeStateType = reactive({
}); });
/**表格字段列 */ /**表格字段列 */
let tableColumns: ColumnsType = [ let tableColumns = ref<TableColumnsType>([
{ {
title: 'IMSI', title: 'IMSI',
dataIndex: 'imsi', dataIndex: 'imsi',
@@ -108,7 +107,10 @@ let tableColumns: ColumnsType = [
title: 'QOS Audio', title: 'QOS Audio',
dataIndex: 'qosAudio', dataIndex: 'qosAudio',
align: 'left', align: 'left',
width: 100, resizable: true,
width: 150,
minWidth: 100,
maxWidth: 300,
}, },
{ {
title: 'PCC Rules', title: 'PCC Rules',
@@ -140,7 +142,7 @@ let tableColumns: ColumnsType = [
align: 'left', align: 'left',
width: 100, width: 100,
}, },
]; ]);
/**表格紧凑型变更操作 */ /**表格紧凑型变更操作 */
function fnTableSize({ key }: MenuInfo) { function fnTableSize({ key }: MenuInfo) {
@@ -729,6 +731,7 @@ onMounted(() => {
:row-class-name="fnTableStriped" :row-class-name="fnTableStriped"
:pagination="false" :pagination="false"
:scroll="{ y: 'calc(100vh - 480px)' }" :scroll="{ y: 'calc(100vh - 480px)' }"
@resizeColumn="(w:number, col:any) => (col.width = w)"
> >
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'imsi'"> <template v-if="column.key === 'imsi'">