<template>
<!
-- 表格容器，根据 dialogTable 的值动态添加 'dialog
-table' 类名
-->
<div :class="{'dialog
-table': dialogTable}" class="table
-box">
<!
-- Element UI 表格组件
-->
<!
-- ref: 为表格组件添加引用，方便后续操作
-->
<!
-- border: 是否显示表格边框
-->
<!
-- data: 表格展示的数据
-->
<!
-- header
-cell
-style: 设置表格表头的背景颜色
-->
<!
-- height: 设置表格的
高度 -->
<!
-- highlight
-current
-row: 是否高亮当前选中行
-->
<!
-- row
-class
-name: 自定义行的类名
-->
<!
-- row
-style: 设置行的样式，此处设置行高为 24px
-->
<!
-- stripe: 是否显示斑马纹
-->
<!
-- style: 设置表格的宽度和边框颜色
-->
<!
-- @selection
-change: 当表格的选中项发生变化时触发的事件
-->
<div class="table
-container">
<el
-table
ref="table"
v
-loading="
loading"
:border="border"
:data="tableData"
:header
-cell
-style="{ background: headerBgColor }"
:height="tableHeight"
:highlight
-current
-row="highlightCurrentRow"
:row
-class
-name="rowClassName"
:row
-style="{ height: '24px' }"
:stripe="stripe"
:style="{ width: '100%', borderColor: tableBorderColor }"
@selection
-change="handleSelectionChange"
@row
-dblclick="handleRowClick"
@row
-click="handleRowClickSelect"
>
<!
-- 多选列
-->
<!
-- v
-if: 当 multipleSelection 为 true 时显示多选列
-->
<!
-- selectable: 当开启单选模式时，
使用 checkSelectable 方法判断行是否可选
-->
<!
-- type: 列的类型，设置为 'selection' 表示多选列
-->
<!
-- width: 列的宽度
-->
<el
-table
-column
v
-if="multipleSelection"
:selectable="singleSelect ? checkSelectable : undefined"
type="selection"
width="40"
></el
-table
-column>
<!
-- 序号列
-->
<!
-- v
-if: 当 showIndex 为 true 时显示序号列
-->
<!
-- align: 列内容的对齐方式，设置为居中对齐
-->
<!
-- label: 列的表头名称
-->
<!
-- width: 列的宽度
-->
<el
-table
-column
v
-if="showIndex"
align="center"
label="序号"
width="60"
>
<!
-- 序号列的内容模板
-->
<!
-- 计算并显示当前行的序号，考虑分页因素
-->
<template #default="scope">
{{ (currentPage
- 1) * pageSize + scope
.$index + 1 }}
</template>
</el
-table
-column>
<!
-- 动态列
-->
<!
-- v
-for: 遍历 columns 数组，动态生成列
-->
<!
-- key: 为每个列设置唯一的 key 值
-->
<!
-- formatter: 列的格式化函数
-->
<!
-- label: 列的表头名称
-->
<!
-- min
-width: 列的最小宽度
-->
<!
-- prop: 列对应的数据字段
-->
<!
-- width: 列的宽度
-->
<!
-- show
-overflow
-tooltip: 是否在内容溢出时显示 tooltip
-->
<el
-table
-column
v
-for="column in columns"
:key="column
.prop"
:formatter="column
.formatter"
:label="column
.label"
:min
-width="column
.minWidth || '80'"
:prop="column
.prop"
:width="column
.width"
v
-if="!isColumnHidden(column)"
:show
-overflow
-tooltip="true"
:fixed="column
.fixed"
>
<!
-- 动态列的内容模板
-->
<template #default="scope">
<!
-- Element UI 提示框组件
-->
<!
-- disabled: 是否禁用提示框
-->
<!
-- effect: 提示框的样式效果
-->
<!
-- placement: 提示框的位置
-->
<el
-tooltip
:disabled="!isTextOverflow(scope
.row[column
.prop], column
.className)"
:effect="effect"
style="max
-width: 600px"
:placement="placement"
>
<!
-- 提示框的内容模板
-->
<template #content>
<div style="max
-width: 600px; word
-break: break
-all">{{ scope
.row[column
.prop] }}</div>
</template>
<!
-- 显示单元格内容的容器
-->
<!
-- class: 根据 column
.preview 的值动态添加 'text
-ellipsis' 类名
-->
<!
-- style: 设置文本颜色和鼠标指针样式
-->
<!
-- @click: 单元格点击事件
-->
<div
:class="{'text
-ellipsis': typeof column
.preview === 'function' ? column
.preview(scope
.row) : column
.preview}"
:style="{
color: getTextColor(scope
.row, column),
cursor: (typeof column
.clickable === 'function' ? column
.clickable(scope
.row) : column
.clickable) ? 'pointer' : 'default' // 新增样式
}"
class="preview
-text"
@click="handleCellClick(column, scope
.row)"
>
<!
-- 显示单元格内容
-->
<!
-- v
-html: 根据 column
.formatter 的值动态显示内容
-->
<div :class="column
.className" v
-html="column
.formatter
? column
.formatter(scope
.row, column, scope
.row[column
.prop])
: scope
.row[column
.prop]" v
-if="!column
.isInlineViewing"></div>
<!
-- 内联查看图标
-->
<!
-- v
-if: 当 column
.isInlineViewing 为 true 时显示图标
-->
<div v
-if="column
.isInlineViewing">
<el
-button type="text" @click="handleAction(column
.icon, scope
.row)">
<!
-- 操作按钮的内容
-->
<div class="action
-item">
<!
-- 操作按钮的图标
-->
<svg
-icon :icon
-class="column
.icon"/>
<!
-- 操作按钮的文本
-->
<div class="action
-text" v
-html="column
.formatter
? column
.formatter(scope
.row, column, scope
.row[column
.prop])
: scope
.row[column
.prop]"></div>
<!
-- <span class="action
-text">{{ scope
.row[column
.prop] }}</span>
-->
</div>
</el
-button>
</div>
<!
-- 新增预览图标
-->
<!
-- v
-if: 根据 column
.preview 的值判断是否显示图标
-->
<svg
-icon
v
-if="typeof column
.preview === 'function' ? column
.preview(scope
.row) : column
.preview"
class="preview
-icon"
icon
-class="primary"
/>
</div>
</el
-tooltip>
</template>
</el
-table
-column>
<!
-- 操作列
-->
<!
-- v
-if: 当 showActionColumn 为 true 时显示操作列
-->
<!
-- label: 操作列的表头名称
-->
<!
-- width: 操作列的宽度
:width="actionColumnWidth"
-->
<!
-- fixed: 操作列固定在右侧
-->
<el
-table
-column
v
-if="showActionColumn"
:label="operation"
:min
-width="calculateActionColumnWidth()"
fixed="right"
>
<!
-- 操作列的内容模板
-->
<template #default="scope">
<!
-- 操作按钮容器
-->
<div class="operation">
<!
-- 遍历操作按钮数组，动态生成按钮
-->
<!
-- v
-for: 遍历操作按钮数组
-->
<!
-- key: 为每个按钮设置唯一的 key 值
-->
<!
-- size: 按钮的大小
-->
<!
-- type: 按钮的类型
-->
<!
-- @click: 按钮点击事件
-->
<el
-button
v
-for="button in (scope
.row
.actionButtons || actionButtons)"
:key="button
.name"
size="small"
type="text"
:
loading="typeof button
.loading === 'function' ? button
.loading(scope
.row) : button
.loading"
v
-if="!button
.hasPermission || $auth
.hasPermi(button
.hasPermission)"
:disabled="button
.disabled ? (typeof button
.disabled === 'function' ? button
.disabled(scope
.row) : button
.disabled) : false"
@click
.stop="handleAction(button
.name, scope
.row)"
>
<!
-- 操作按钮的内容
-->
<span class="action
-item">
<!
-- 操作按钮的图标
-->
<svg
-icon
:icon
-class="button
.icon || button
.name"
class="action
-icon"
:class="{'disabled
-text': button
.disabled? (typeof button
.disabled === 'function' ? button
.disabled(scope
.row) : button
.disabled) : false}"
/>
<!
-- 操作按钮的文本
-->
<span class="action
-text"
:class="{'disabled
-text': button
.disabled? (typeof button
.disabled === 'function' ? button
.disabled(scope
.row) : button
.disabled) : false}">{{
button
.label
}}</span>
</span>
</el
-button>
</div>
</template>
</el
-table
-column>
</el
-table>
</div>
<!
-- 分页组件容器
-->
<div class="pagination
-wrapper" v
-if="paginationFlag">
<!
-- Element UI 分页组件
-->
<!
-- background: 是否显示分页按钮的背景
-->
<!
-- current
-page: 当前页码
-->
<!
-- layout: 分页组件的布局
-->
<!
-- page
-size: 每页显示的记录数
-->
<!
-- page
-sizes: 每页显示记录数的可选值
-->
<!
-- total: 总记录数
-->
<!
-- @size
-change: 每页显示记录数变化时触发的事件
-->
<!
-- @current
-change: 当前页码变化时触发的事件
-->
<el
-pagination
:background="background"
:current
-page="currentPage"
:layout="layout"
:page
-size="pageSize"
:page
-sizes="pageSizes"
:total="total"
@size
-change="handleSizeChange"
@current
-change="handleCurrentChange"
/>
</div>
</div>
</template>
<script>
/**
* ElementTableWrapper 组件
* 封装了 Element UI 的表格组件，提供了多选、序号、动态列、操作列和分页等功能
*/
export default {
name: 'ElementTableWrapper',
props: {
// 表格数据
tableData: {
type: Array,
default: () => []
},
// 列配置
columns: {
type: Array,
default: () => []
},
// 列配置
operation: {
type: String,
default: '操作'
},
// 是否开启多选功能
multipleSelection: {
type: Boolean,
default: false
},
// 是否显示操作列
showActionColumn: {
type: Boolean,
default: true
},
// 是否显示边框
border: {
type: Boolean,
default: true
},
// 是否显示斑马纹
stripe: {
type: Boolean,
default: false
},
// 是否高亮当前行
highlightCurrentRow: {
type: Boolean,
default: false
},
// 是否高亮当前行
dialogTable: {
type: Boolean,
default: false
},
// 是否显示分页功能
paginationFlag: {
type: Boolean,
default: true
},
// 行样式类名回调函数
rowClassName: {
type: Function,
default: () => ''
},
// 操作按钮配置
actionButtons: {
type: Array,
default: () => [
{name: 'add', label: '新增', icon: 'add'},
{name: 'edit', label: '编辑', icon: 'edit'},
{name: 'delete', label: '删除', icon: 'delete'}
]
},
// 表格头背景颜色
headerBgColor: {
type: String,
default: '#F9FAFB'
},
// 表格边框颜色
tableBorderColor: {
type: String,
default: 'rgb(234, 236, 240)'
},
// 新增单选控制props
singleSelect: { // 启用单选模式
type: Boolean,
default: false
},
// 默认选中首行
defaultSelect: {
type: Boolean,
default: false
},
// 新增分页相关props
currentPage: {
type: Number,
default: 1
},
// 每页显示的记录数
pageSize: {
type: Number,
default: 10
},
// 总记录数
total: {
type: Number,
default: 0
},
// 每页显示记录数的可选值
pageSizes: {
type: Array,
default: () => [10, 20, 50, 100]
},
// 分页组件的布局
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
},
// 是否显示分页按钮的背景
background: {
type: Boolean,
default: true
},
// 表格
高度
tableHeight: {
type: [String, Number],
default: '100%' // 默认100%
高度
},
// 是否显示序号列
showIndex: {
type: Boolean,
default: true
},
// 是否启用行点击事件
rowClickEnable: {
type: Boolean,
default: false
},
// 行点击事件处理器
rowClickHandler: {
type: Function,
default: null
},
// 提示框的样式效果
effect: {
type: String,
default: 'dark'
},
// 提示框的位置
placement: {
type: String,
default: 'top'
},
enableRowClickSelect: {
type: Boolean,
default: false
},
// 新增
loading 属性
loading: {
type: Boolean,
default: false
}
},
data() {
return {
currentSelection: null, // 当前选中行
crossPageSelection: [], // 跨页选择的数据
}
},
watch: {
/**
* 监听表格数据变化
* 当表格数据变化且 defaultSelect 为 true 时，默认选中第一行
* @param {Array} newVal
- 新的表格数据
*/
tableData(newVal) {
if (this
.defaultSelect && newVal
.length > 0) {
this
.$nextTick(() => {
// 切换第一行的选中状态为选中
this
.$refs
.table
.toggleRowSelection(newVal[0], true)
})
}
},
},
mounted() {
this
.$emit('rendered'); // 触发 rendered 事件
},
methods: {
/**
* 处理操作按钮点击事件
* 触发与按钮名称对应的自定义事件，并传递当前行数据
* @param {string} actionName
- 操作按钮的名称
* @param {Object} row
- 当前行的数据
*/
handleAction(actionName, row) {
this
.$emit(actionName, row);
},
// 处理行点击事件
handleRowClick(row) {
if (this
.rowClickEnable) {
// 触发自定义行点击事件
this
.$emit('row
-click', row);
// 如果有自定义处理函数则执行
if (this
.rowClickHandler) {
this
.rowClickHandler(row);
}
}
},
/**
* 获取文本颜色
* 根据列的文本颜色规则，判断是否需要修改文本颜色
* @param {Object} row
- 当前行的数据
* @param {Object} column
- 当前列的配置
* @returns {string}
- 文本颜色
*/
getTextColor(row, column) { // 将参数名从prop改为column
if (column
.textColorRule) {
const {condition, color} = column
.textColorRule;
if (condition(row)) {
// 新增：如果 color 是函数则调用并传入当前行数据，否则直接
使用字符串
return typeof color === 'function' ? color(row) : color;
}
}
return 'rgb(38, 38, 38)';
},
/**
* 处理单元格点击事件
* 当单元格可点击时，触发 'cell
-click' 自定义事件
* @param {Object} column
- 当前列的配置
* @param {Object} row
- 当前行的数据
*/
handleCellClick(column, row) {
if (typeof column
.clickable === 'function'
? column
.clickable(row)
: column
.clickable) {
this
.$emit('cell
-click', {
column,
row,
prop: column
.prop
})
}
},
/**
* 判断文本是否溢出
* 通过比较
元素的滚动宽度和客户端宽度来判断文本是否溢出
* @param {string} text
- 文本内容
* @param className
* @returns {boolean}
- 文本是否溢出
*/
isTextOverflow(text, className) {
if (!text || !className) return false;
// 创建测量容器
const container = document
.createElement('div');
container
.className = className;
container
.style
.cssText = `
position: absolute;
visibility: hidden;
white
-space: nowrap;
font
-size: 14px;
padding: 0 8px;
max
-width: 100%;
`;
// 创建文本测量
元素
const textSpan = document
.createElement('div');
textSpan
.textContent = text;
// 测量逻辑
document
.body.appendChild(container);
container
.appendChild(textSpan);
const containerWidth = container
.offsetWidth;
const textWidth = textSpan
.offsetWidth;
document
.body.removeChild(container);
// 双重判断：文本超过容器宽度且在表格最大宽度范围内
return textWidth > containerWidth;
},
/**
* 处理每页显示记录数变化事件
* 触发 'update:pageSize' 和 'pagination
-change' 自定义事件
* @param {number} val
- 新的每页显示记录数
*/
handleSizeChange(val) {
this
.$emit('update:pageSize', val);
this
.$emit('pagination
-change', {
page: this
.currentPage,
size: val
});
// 新增：滚动到表格顶部
this
.$nextTick(() => {
const tableWrapper = this
.$refs
.table
.$el
.querySelector('
.el
-table__
body-wrapper');
if (tableWrapper) {
tableWrapper
.scrollTop = 0;
}
});
},
// 暴露给父组件的方法
toggleRowSelection(row, selected) {
this
.$refs
.table
.toggleRowSelection(row, selected)
},
/**
* 处理表格选中项变化事件
* 当开启单选模式时，确保只选中一行
* @param {Array} selection
- 当前选中的行数据数组
*/
handleSelectionChange(selection) {
if (this
.singleSelect) {
if (selection
.length > 1) {
const last = selection[selection
.length
- 1]
// 清空所有选中项
this
.$refs
.table
.clearSelection()
// 切换最后一项的选中状态为选中
this
.$refs
.table
.toggleRowSelection(last)
this
.currentSelection = last
} else {
this
.currentSelection = selection[0] || null
}
}
// 触发 'selection
-change' 自定义事件，传递跨页选择的数据
this
.$emit('selection
-change', selection)
},
/**
* 计算操作列的宽度
* 根据操作按钮的数量和每个按钮的大致宽度计算操作列的宽度
* @returns {number}
- 操作列的宽度
*/
calculateActionColumnWidth() {
const getButtonWidth = (text) => {
if (text
.length >= 4) return 80;
else if (text
.length >= 2) return 60;
return 40;
};
// 权限判断方法（与模板中的v
-if逻辑保持一致）
const hasPermission = (button) => {
return !button
.hasPermission || this
.$auth
.hasPermi(button
.hasPermission);
};
const maxButtonCountRow = this
.tableData
.reduce((prev, current) => {
// 过滤无权限按钮后比较
const prevValid = (prev
.actionButtons || this
.actionButtons)
.filter(hasPermission);
const currentValid = (current
.actionButtons || this
.actionButtons)
.filter(hasPermission);
return prevValid
.length > currentValid
.length ? prev : current;
}, {});
// 过滤有效按钮
const validButtons = (maxButtonCountRow
.actionButtons || this
.actionButtons)
.filter(hasPermission);
return validButtons
.reduce((sum, button) => {
return sum + getButtonWidth(button
.label);
}, 0); // 增加安全边距
},
/**
* 检查行是否可选
* 当开启单选模式时，判断行是否可以被选中
* @param {Object} row
- 当前行的数据
* @param {number} index
- 当前行的索引（未
使用）
* @returns {boolean}
- 行是否可选
*/
checkSelectable(row, index) {
return !this
.currentSelection || row === this
.currentSelection
},
/**
* 处理当前页码变化事件
* 触发 'update:currentPage' 和 'pagination
-change' 自定义事件
* @param {number} val
- 新的当前页码
*/
handleCurrentChange(val) {
this
.$emit('update:currentPage', val);
this
.$emit('pagination
-change', {
page: val,
size: this
.pageSize
});
// 新增：滚动到表格顶部
this
.$nextTick(() => {
const tableWrapper = this
.$refs
.table
.$el
.querySelector('
.el
-table__
body-wrapper');
if (tableWrapper) {
tableWrapper
.scrollTop = 0;
}
});
},
// 新增列隐藏判断方法
isColumnHidden(column) {
if (typeof column
.hidden === 'function') {
return column
.hidden(this
.$parent) // 传入父组件上下文
}
return !!column
.hidden
},
/**
* 处理行点击选中事件
* 当 enableRowClickSelect 为 true 时，选中点击的行
* @param {Object} row
- 当前点击行的数据
*/
handleRowClickSelect(row) {
if (this
.enableRowClickSelect) {
if (this
.singleSelect) {
// 单选模式，清空其他选中项，选中当前行
this
.$refs
.table
.clearSelection();
this
.$refs
.table
.toggleRowSelection(row, true);
} else {
// 多选模式，切换当前行的选中状态
this
.$refs
.table
.toggleRowSelection(row);
}
this
.$emit('selection
-change', this
.$refs
.table
.selection);
}
}
}
};
</script>
<style lang="scss" scoped>
.table
-box {
display: flex;
flex
-direction: column;
flex: 1;
overflow: hidden;
}
.table
-container {
flex: 1;
overflow: auto;
::v
-deep
.el
-table {
.el
-table__
body-wrapper {
overflow: auto;
height: calc(100%
- 44px) !important;
}
}
}
/**
* 对话框中的表格样式
* 设置表格
高度为 100%
*/
.dialog
-table {
height: 100%;
}
/**
* 分页组件容器样式
* 绝对定位到底部右侧，宽度为表格宽度减去 33px，文本右对齐
*/
.pagination
-wrapper {
position: relative;
text
-align: right;
margin
-bottom: 10px;
margin
-top: 15px;
}
/**
* 表格容器样式
* 确保表格容器有相对定位，设置最小
高度
*/
div:first
-child {
position: relative;
min
-height: 30px; /* 可根据需要调整最小
高度 */
}
/**
* 分页按钮样式
* 设置分页按钮的边框、圆角、内边距和鼠标悬停样式
*/
::v
-deep
.el
-pagination
.is
-background {
.btn
-prev,
.btn
-next {
border: 1px solid #DCDFE6;
border
-radius: 4px;
padding: 0 8px;
margin: 0 5px;
&:hover {
color: #409EFF;
border
-color: #409EFF;
}
}
}
/**
* 表格基础样式
* 设置表格字体大小，处理文本换行和溢出情况，设置预览图标样式
*/
::v
-deep
.el
-table {
font
-size: 14px;
/**
* 允许换行的列样式
* 允许文本换行，调整行高
*/
.wrap
-text
-column {
white
-space: normal !important; /* 允许换行 */
word
-break: break
-all; /* 允许单词内换行 */
line
-height: 1
.5; /* 调整行高 */
}
/**
* 鼠标悬停在表格行上时的样式
* 显示预览图标
*/
tr:hover {
.preview
-icon {
display: inline
-block !important;
}
}
.cell
-content {
.content
-wrapper {
.el
-icon
-loading {
display: inline
-block !important;
position: absolute;
right: 8px;
top: 25%;
color: #1D9C9D;
}
}
}
/**
* 非换行列的样式
* 文本不换行，溢出部分显示省略号
*/
:not(
.wrap
-text
-column) {
.cell {
white
-space: nowrap;
overflow: hidden;
text
-overflow: ellipsis;
}
}
/**
* 文本省略样式
* 文本不换行，溢出部分显示省略号，为图标留出空间
*/
.text
-ellipsis {
position: relative;
padding
-right: 24px; // 为图标留出空间
display: inline
-block;
width: 100%;
overflow: hidden;
text
-overflow: ellipsis;
white
-space: nowrap;
}
/**
* 预览图标样式
* 默认隐藏，鼠标悬停在表格行上时显示
*/
.preview
-icon {
display: none;
position: absolute;
right: 8px;
top: 25%;
cursor: pointer;
color: #1D9C9D;
}
/**
* 预览文本样式
* 文本不换行，溢出部分显示省略号，垂直居中
*/
.preview
-text {
display: inline
-block;
width: 100%;
overflow: hidden;
text
-overflow: ellipsis;
white
-space: nowrap;
vertical
-align: middle;
line
-height: 2;
/**
* 标签列样式
* 允许标签换行，设置标签样式
*/
.tags
-column {
white
-space: normal !important;
line
-height: 1
.5;
/**
* 标签项样式
* 设置标签的边框、圆角、颜色和背景颜色
*/
.tag
-item {
display: inline
-block;
padding: 2px 8px;
margin: 2px;
border: 1px solid rgba(255, 105, 41, 0
.5);
border
-radius: 4px;
color: #FF6929;
background
-color: transparent;
font
-size: 12px;
word
-break: keep
-all; /* 防止单个标签换行 */
}
}
}
/**
* 表格表头和单元格样式
* 调整内边距，设置文本不换行，不隐藏溢出内容，不显示省略号
*/
th, td {
padding: 2px 0;
.cell {
white
-space: nowrap;
overflow: visible;
text
-overflow: ellipsis;
line
-height: 1;
}
}
td
.el
-table__cell div {
overflow: hidden;
text
-overflow: ellipsis;
white
-space: nowrap;
}
}
/**
* 操作项样式
* 设置操作按钮和操作项的布局为水平居中对齐
*/
.operation,
.action
-item {
display: flex;
white
-space: nowrap; /* 防止操作按钮换行 */
align
-items: center;
}
/**
* 文本省略样式
* 文本不换行，溢出部分显示省略号
*/
.text
-ellipsis {
white
-space: nowrap;
overflow: hidden;
text
-overflow: ellipsis;
}
.action
-item {
cursor: pointer;
margin
-right: 8px;
&:last
-child {
margin
-right: 0;
}
.action
-text {
margin
-left: 4px;
font
-size: 12px;
color: rgb(31, 198, 234);
}
.action
-icon {
width: 1em;
height: 1em;
color: #1FC6EA;
transition: color 0
.2s;
&:hover {
color: #1FC6EA;
}
}
.disabled
-text {
color: #999;
}
}
::v
-deep
.el
-button
--text {
padding: 2px 0;
}
.action
-item {
display: inline
-flex;
align
-items: center;
cursor: pointer;
margin
-right: 8px;
&:last
-child {
margin
-right: 0;
}
}
.action
-text {
margin
-left: 4px;
font
-size: 12px;
color: #606266;
}
.action
-icon {
width: 1em;
height: 1em;
cursor: pointer;
color: #606266;
transition: color 0
.2s;
}
.action
-icon:hover {
color: #1FC6EA;
}
/* 添加表格字体大小设置 */
::v
-deep
.el
-table {
font
-size: 14px; /* 可调整字体大小 */
}
::v
-deep
.el
-table th,
::v
-deep
.el
-table td {
padding: 10px 0; /* 调整单元格内边距 */
}
/* 表格内容单行显示 */
::v
-deep
.el
-table
.cell {
white
-space: nowrap; /* 不换行 */
overflow: visible; /* 不隐藏溢出内容 */
text
-overflow: ellipsis; /* 不显示省略号 */
line
-height: 1; /* 行高 */
}
</style>
数据内容{
"total": 77251,
"rows": [
{
"id": "3109226059753587717",
"stationId": "10042",
"stationName": "盘城变",
"voltageLevel": "220kV",
"voltageLevelCode": "33",
"bayId": "10006395",
"bayName": "2号主变",
"areaId": "206",
"areaName": "220北",
"equipLevel": "32",
"equipLevelName": "110kV",
"equipName": "2号主变110kV侧中性点成套装置",
"equipNo": "10MZ0108517959259",
"equipModel": "SR
-JXB
-110",
"equipTypeId": 141,
"equipTypeName": "主变中性点成套装置",
"transRunNo": "",
"useEnvironment": "户外式",
"useEnvironmentCode": "2",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": null,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "",
"produceOrgId": "",
"produceOrg": "江苏省如高高压电器有限公司",
"startTime": "2022
-09
-30",
"manufactureDate": "2021
-05
-01",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": "O",
"phaseCode": "4",
"psrStateName": "在运",
"psrState": "20"
},
{
"id": "3109226059753587718",
"stationId": "10089",
"stationName": "万寿变",
"voltageLevel": "110kV",
"voltageLevelCode": "32",
"bayId": "10004149",
"bayName": "1号主变",
"areaId": "213",
"areaName": "城北",
"equipLevel": "32",
"equipLevelName": "110kV",
"equipName": "1号主变中性点成套装置",
"equipNo": "10MZ0108518228845",
"equipModel": "CG
-IXB
-110/1600",
"equipTypeId": 141,
"equipTypeName": "主变中性点成套装置",
"transRunNo": "",
"useEnvironment": "户外式",
"useEnvironmentCode": "2",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": null,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "",
"produceOrgId": "",
"produceOrg": "湖南长高高压开关有限公司",
"startTime": "2023
-01
-01",
"manufactureDate": "2021
-11
-01",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": "O",
"phaseCode": "4",
"psrStateName": "在运",
"psrState": "20"
},
{
"id": "3109226059753587719",
"stationId": "64386cb90e3c11ee90179e25b59ef9e0",
"stationName": "绿洲变",
"voltageLevel": "110kV",
"voltageLevelCode": "32",
"bayId": "64d4ac720e3c11ee90179e25b59ef9e0",
"bayName": "1号主变",
"areaId": "210",
"areaName": "城南",
"equipLevel": "32",
"equipLevelName": "110kV",
"equipName": "1号主变中性点成套装置",
"equipNo": "10MZ0108519189286",
"equipModel": "XK
-ZJB
-110",
"equipTypeId": 141,
"equipTypeName": "主变中性点成套装置",
"transRunNo": "",
"useEnvironment": "户内式",
"useEnvironmentCode": "1",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": null,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "",
"produceOrgId": "",
"produceOrg": "西安西电高压开关有限责任公司",
"startTime": "2023
-06
-26",
"manufactureDate": "2023
-05
-01",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": "O",
"phaseCode": "4",
"psrStateName": "在运",
"psrState": "20"
},
{
"id": "3109226059753587720",
"stationId": "64386cb90e3c11ee90179e25b59ef9e0",
"stationName": "绿洲变",
"voltageLevel": "110kV",
"voltageLevelCode": "32",
"bayId": "64d4ac7c0e3c11ee90179e25b59ef9e0",
"bayName": "2号主变",
"areaId": "210",
"areaName": "城南",
"equipLevel": "32",
"equipLevelName": "110kV",
"equipName": "2号主变中性点成套装置",
"equipNo": "10MZ0108519190392",
"equipModel": "XK
-ZJB
-110",
"equipTypeId": 141,
"equipTypeName": "主变中性点成套装置",
"transRunNo": "",
"useEnvironment": "户内式",
"useEnvironmentCode": "1",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": null,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "",
"produceOrgId": "",
"produceOrg": "西安西电高压开关有限责任公司",
"startTime": "2023
-06
-26",
"manufactureDate": "2023
-05
-01",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": "O",
"phaseCode": "4",
"psrStateName": "在运",
"psrState": "20"
},
{
"id": "3109226059753587721",
"stationId": "10000002",
"stationName": "徐庄变",
"voltageLevel": "110kV",
"voltageLevelCode": "32",
"bayId": "128246796",
"bayName": "2号主变",
"areaId": "213",
"areaName": "城北",
"equipLevel": "32",
"equipLevelName": "110kV",
"equipName": "2号主变中性点成套装置",
"equipNo": "10MZ0108519046377",
"equipModel": "GW13
-72
.5(W)",
"equipTypeId": 141,
"equipTypeName": "主变中性点成套装置",
"transRunNo": "",
"useEnvironment": "户内式",
"useEnvironmentCode": "1",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": null,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "",
"produceOrgId": "",
"produceOrg": "江苏如皋高压电器有限公司",
"startTime": "2011
-03
-11",
"manufactureDate": "2011
-01
-01",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": "O",
"phaseCode": "4",
"psrStateName": "在运",
"psrState": "20"
},
{
"id": "3109226059753587722",
"stationId": "10000002",
"stationName": "徐庄变",
"voltageLevel": "110kV",
"voltageLevelCode": "32",
"bayId": "10014690",
"bayName": "1号主变",
"areaId": "213",
"areaName": "城北",
"equipLevel": "32",
"equipLevelName": "110kV",
"equipName": "1号主变中性点成套装置",
"equipNo": "10MZ0108519046388",
"equipModel": "GW13
-72
.5(W)",
"equipTypeId": 141,
"equipTypeName": "主变中性点成套装置",
"transRunNo": "",
"useEnvironment": "户内式",
"useEnvironmentCode": "1",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": null,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "",
"produceOrgId": "",
"produceOrg": "江苏如皋高压电器有限公司",
"startTime": "2011
-03
-11",
"manufactureDate": "2011
-01
-01",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": "O",
"phaseCode": "4",
"psrStateName": "在运",
"psrState": "20"
},
{
"id": "3109226059753587723",
"stationId": "a13ce0756f8a06deed5382a7950153a13cbdc630ab",
"stationName": "诚实变",
"voltageLevel": "110kV",
"voltageLevelCode": "32",
"bayId": "c2b10909
-afe1
-47fa
-af68
-c268247d1a7d",
"bayName": "2号主变",
"areaId": "213",
"areaName": "城北",
"equipLevel": "32",
"equipLevelName": "110kV",
"equipName": "2号主变中性点成套装置",
"equipNo": "10MZ0108521242648",
"equipModel": "GW13
-126W/1600",
"equipTypeId": 141,
"equipTypeName": "主变中性点成套装置",
"transRunNo": "",
"useEnvironment": "户内式",
"useEnvironmentCode": "1",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": null,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "",
"produceOrgId": "",
"produceOrg": "常州思源东芝变压器有限公司",
"startTime": "2024
-09
-06",
"manufactureDate": "2024
-01
-01",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": "O",
"phaseCode": "4",
"psrStateName": "在运",
"psrState": "20"
},
{
"id": "3109226059753587724",
"stationId": "19b7e87c
-70b3
-4736
-9126
-066604cfe72f",
"stationName": "小村变",
"voltageLevel": "110kV",
"voltageLevelCode": "32",
"bayId": "d22b61f9
-4a32
-4da2
-b2d8
-c10a447d1f51",
"bayName": "2号主变",
"areaId": "210",
"areaName": "城南",
"equipLevel": "32",
"equipLevelName": "110kV",
"equipName": "2号主变中性点成套装置",
"equipNo": "10MZ0108521256500",
"equipModel": "ZJKK
-320
-15",
"equipTypeId": 141,
"equipTypeName": "主变中性点成套装置",
"transRunNo": "",
"useEnvironment": "户内式",
"useEnvironmentCode": "1",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": null,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "",
"produceOrgId": "",
"produceOrg": "江苏如高高压电器有限公司",
"startTime": "2024
-09
-23",
"manufactureDate": "2024
-02
-01",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": "O",
"phaseCode": "4",
"psrStateName": "在运",
"psrState": "20"
},
{
"id": "3109226059753587725",
"stationId": "19b7e87c
-70b3
-4736
-9126
-066604cfe72f",
"stationName": "小村变",
"voltageLevel": "110kV",
"voltageLevelCode": "32",
"bayId": "6acbf7ba
-0563
-4500
-92af
-07f80a9f0137",
"bayName": "1号主变",
"areaId": "210",
"areaName": "城南",
"equipLevel": "32",
"equipLevelName": "110kV",
"equipName": "1号主变中性点成套装置",
"equipNo": "10MZ0108521256499",
"equipModel": "ZJKK
-320
-15",
"equipTypeId": 141,
"equipTypeName": "主变中性点成套装置",
"transRunNo": "",
"useEnvironment": "户内式",
"useEnvironmentCode": "1",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": null,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "",
"produceOrgId": "",
"produceOrg": "江苏如高高压电器有限公司",
"startTime": "2024
-09
-23",
"manufactureDate": "2024
-02
-01",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": "O",
"phaseCode": "4",
"psrStateName": "在运",
"psrState": "20"
},
{
"id": "3109226059753587726",
"stationId": "10055",
"stationName": "珠江路变",
"voltageLevel": "110kV",
"voltageLevelCode": "32",
"bayId": "4fcb2a97
-9e97
-4382
-ad72
-76fa14a0a900",
"bayName": "3号主变",
"areaId": "213",
"areaName": "城北",
"equipLevel": "32",
"equipLevelName": "110kV",
"equipName": "3号主变中性点成套装置",
"equipNo": "10MZ0108521889218",
"equipModel": "SR
-JXB
-110",
"equipTypeId": 141,
"equipTypeName": "主变中性点成套装置",
"transRunNo": "3号主变中性点成套装置",
"useEnvironment": "户外式",
"useEnvironmentCode": "2",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": null,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "KH250066",
"produceOrgId": "",
"produceOrg": "江苏如高高压电气有限公司",
"startTime": "2025
-04
-01",
"manufactureDate": "2025
-03
-01",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": "O",
"phaseCode": "4",
"psrStateName": "在运",
"psrState": "20"
},
{
"id": "3109226059753587727",
"stationId": "10054",
"stationName": "云南路变",
"voltageLevel": "110kV",
"voltageLevelCode": "32",
"bayId": "10001660",
"bayName": "1号主变",
"areaId": "213",
"areaName": "城北",
"equipLevel": "32",
"equipLevelName": "110kV",
"equipName": "1号主变中性点成套装置",
"equipNo": "10MZ0108521404169",
"equipModel": "XK
-ZJB
-110",
"equipTypeId": 141,
"equipTypeName": "主变中性点成套装置",
"transRunNo": "",
"useEnvironment": "户内式",
"useEnvironmentCode": "1",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": null,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "2801240138",
"produceOrgId": "",
"produceOrg": "西安西电高压开关有限责任公司",
"startTime": "2024
-10
-23",
"manufactureDate": "2024
-08
-30",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": "O",
"phaseCode": "4",
"psrStateName": "在运",
"psrState": "20"
},
{
"id": "3109226059753587728",
"stationId": "0f1da7c8
-e937
-47a9
-ae19
-485c64ed19bd",
"stationName": "骆家变",
"voltageLevel": "110kV",
"voltageLevelCode": "32",
"bayId": "09cf5ce2
-3384
-4b4c
-920d
-d782477a447f",
"bayName": "2号主变",
"areaId": "213",
"areaName": "城北",
"equipLevel": "32",
"equipLevelName": "110kV",
"equipName": "2号主变中性点成套装置",
"equipNo": "10MZ0108521505000",
"equipModel": "SR
-JXB
-110",
"equipTypeId": 141,
"equipTypeName": "主变中性点成套装置",
"transRunNo": "",
"useEnvironment": "户内式",
"useEnvironmentCode": "1",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": null,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "",
"produceOrgId": "",
"produceOrg": "江苏省如皋高压电器有限公司",
"startTime": "2024
-12
-20",
"manufactureDate": "2023
-10
-01",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": "O",
"phaseCode": "4",
"psrStateName": "在运",
"psrState": "20"
},
{
"id": "3109226059753587729",
"stationId": "0f1da7c8
-e937
-47a9
-ae19
-485c64ed19bd",
"stationName": "骆家变",
"voltageLevel": "110kV",
"voltageLevelCode": "32",
"bayId": "6ab30fc2
-7c0f
-4c53
-8ee1
-0e5b5745ec71",
"bayName": "1号主变",
"areaId": "213",
"areaName": "城北",
"equipLevel": "32",
"equipLevelName": "110kV",
"equipName": "1号主变中性点成套装置",
"equipNo": "10MZ0108521504999",
"equipModel": "SR
-JXB
-110",
"equipTypeId": 141,
"equipTypeName": "主变中性点成套装置",
"transRunNo": "",
"useEnvironment": "户内式",
"useEnvironmentCode": "1",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": null,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "",
"produceOrgId": "",
"produceOrg": "江苏省如皋高压电器有限公司",
"startTime": "2024
-12
-20",
"manufactureDate": "2023
-10
-01",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": "O",
"phaseCode": "4",
"psrStateName": "在运",
"psrState": "20"
},
{
"id": "3109226059753587730",
"stationId": "10054",
"stationName": "云南路变",
"voltageLevel": "110kV",
"voltageLevelCode": "32",
"bayId": "10001661",
"bayName": "2号主变",
"areaId": "213",
"areaName": "城北",
"equipLevel": "32",
"equipLevelName": "110kV",
"equipName": "2号主变中性点成套装置",
"equipNo": "10MZ0108521500656",
"equipModel": "XK
-ZJB
-110",
"equipTypeId": 141,
"equipTypeName": "主变中性点成套装置",
"transRunNo": "",
"useEnvironment": "户内式",
"useEnvironmentCode": "1",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": null,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "60613",
"produceOrgId": "",
"produceOrg": "西安西电高压开关有限公司",
"startTime": "2024
-12
-19",
"manufactureDate": "2006
-06
-01",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": "O",
"phaseCode": "4",
"psrStateName": "在运",
"psrState": "20"
},
{
"id": "3109226059753587731",
"stationId": "10100",
"stationName": "上新河变",
"voltageLevel": "110kV",
"voltageLevelCode": "32",
"bayId": "10005161",
"bayName": "2号主变",
"areaId": "210",
"areaName": "城南",
"equipLevel": "32",
"equipLevelName": "110kV",
"equipName": "2号主变中性点成套装置",
"equipNo": "10MZ0108522469177",
"equipModel": "SR
-JXB
-110",
"equipTypeId": 141,
"equipTypeName": "主变中性点成套装置",
"transRunNo": "",
"useEnvironment": "户外式",
"useEnvironmentCode": "2",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": null,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "KH250036828",
"produceOrgId": "",
"produceOrg": "江苏如高高压电器有限公司",
"startTime": "2025
-05
-07",
"manufactureDate": "2025
-03
-01",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": "O",
"phaseCode": "4",
"psrStateName": "在运",
"psrState": "20"
},
{
"id": "3109226059753587732",
"stationId": "10055",
"stationName": "珠江路变",
"voltageLevel": "110kV",
"voltageLevelCode": "32",
"bayId": "8bbba0e3
-8214
-4833
-80c2
-4fbb37cedd47",
"bayName": "2号主变",
"areaId": "213",
"areaName": "城北",
"equipLevel": "32",
"equipLevelName": "110kV",
"equipName": "2号主变中性点成套装置",
"equipNo": "10MZ0108522399716",
"equipModel": "SR
-JXB
-110",
"equipTypeId": 141,
"equipTypeName": "主变中性点成套装置",
"transRunNo": "",
"useEnvironment": "户内式",
"useEnvironmentCode": "1",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": null,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "KH250064",
"produceOrgId": "",
"produceOrg": "江苏如高高压电器有限公司",
"startTime": "2025
-05
-06",
"manufactureDate": "2025
-03
-01",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": "O",
"phaseCode": "4",
"psrStateName": "在运",
"psrState": "20"
},
{
"id": "3109226059753587733",
"stationId": "a13ce0756f8a06deed5382a7950153a13cbdc630ab",
"stationName": "诚实变",
"voltageLevel": "110kV",
"voltageLevelCode": "32",
"bayId": "9b15d344
-3e5b
-41f1
-88fb
-86f94ec6f5c3",
"bayName": "1号主变",
"areaId": "213",
"areaName": "城北",
"equipLevel": "32",
"equipLevelName": "110kV",
"equipName": "1号主变中性点成套装置",
"equipNo": "10MZ0108522479005",
"equipModel": "GW13
-126W/1600",
"equipTypeId": 141,
"equipTypeName": "主变中性点成套装置",
"transRunNo": "",
"useEnvironment": "户内式",
"useEnvironmentCode": "1",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": null,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "",
"produceOrgId": "",
"produceOrg": "江苏华鹏变压器有限公司",
"startTime": "2025
-05
-12",
"manufactureDate": "2025
-02
-01",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": "O",
"phaseCode": "4",
"psrStateName": "在运",
"psrState": "20"
},
{
"id": "3109222058689561600",
"stationId": "154178358",
"stationName": "滨南变",
"voltageLevel": "220kV",
"voltageLevelCode": "33",
"bayId": null,
"bayName": null,
"areaId": "203",
"areaName": "220南",
"equipLevel": "22",
"equipLevelName": "10kV",
"equipName": "1号主变102B4接地刀闸",
"equipNo": "10MZ0108517740354",
"equipModel": null,
"equipTypeId": 138,
"equipTypeName": "低压隔离开关",
"transRunNo": "102B4",
"useEnvironment": "",
"useEnvironmentCode": "",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": 4000
.0,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "C2113022",
"produceOrgId": "",
"produceOrg": "江苏如高高压电器有限公司",
"startTime": "2022
-06
-30",
"manufactureDate": "2022
-07
-01",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": null,
"phaseCode": null,
"psrStateName": "在运",
"psrState": "20"
},
{
"id": "3109222058689561601",
"stationId": "154178358",
"stationName": "滨南变",
"voltageLevel": "220kV",
"voltageLevelCode": "33",
"bayId": null,
"bayName": null,
"areaId": "203",
"areaName": "220南",
"equipLevel": "22",
"equipLevelName": "10kV",
"equipName": "1号主变102B5接地刀闸",
"equipNo": "10MZ0108517740480",
"equipModel": null,
"equipTypeId": 138,
"equipTypeName": "低压隔离开关",
"transRunNo": "102B5",
"useEnvironment": "",
"useEnvironmentCode": "",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": 4000
.0,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "C2113021",
"produceOrgId": "",
"produceOrg": "江苏如高高压电器有限公司",
"startTime": "2022
-06
-30",
"manufactureDate": "2022
-07
-01",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": null,
"phaseCode": null,
"psrStateName": "在运",
"psrState": "20"
},
{
"id": "3109222058689561602",
"stationId": "154178358",
"stationName": "滨南变",
"voltageLevel": "220kV",
"voltageLevelCode": "33",
"bayId": null,
"bayName": null,
"areaId": "203",
"areaName": "220南",
"equipLevel": "22",
"equipLevelName": "10kV",
"equipName": "2号主变102A4接地刀闸",
"equipNo": "10MZ0108517740549",
"equipModel": null,
"equipTypeId": 138,
"equipTypeName": "低压隔离开关",
"transRunNo": "102A4",
"useEnvironment": "",
"useEnvironmentCode": "",
"structType": "",
"structTypeCode": "",
"insulationMedium": "",
"insulationMediumCode": "",
"ratedCurrent": 4000
.0,
"ratedBreakCurrent": null,
"ratedCapacity": null,
"breakerStructType": "",
"breakerStructTypeCode": "",
"ownNo": "C2113023",
"produceOrgId": "",
"produceOrg": "江苏如高高压电器有限公司",
"startTime": "2022
-06
-30",
"manufactureDate": "2022
-07
-01",
"lastUpdateTime": "",
"nextUpdateTime": "",
"cycle": "6",
"cycleUnit": "1",
"dispatchRecord": "",
"regulatePressureMode": null,
"regulatePressureModeCode": null,
"equipmentType": null,
"equipmentTypeCode": null,
"phase": null,
"phaseCode": null,
"psrStateName": "在运",
"psrState": "20"
}
],
"code": 200,
"msg": "查询成功"
} 在this
.tableData = res
.rows
.map(row => {
const deviceType = row
.equipTypeName;
const deviceColumns = this
.configMap[deviceType] || [];
const newRow = {
...row};
// 遍历所有列，若不在设备类型对应列中，则添加斜线
this
.columns
.forEach(col => {
const prop = col
.prop;
if (!deviceColumns
.includes(col
.label)) {
newRow[prop] = '/';
}
});
return newRow;
});为什么渲染的时候需要2s左右
当v-loading在高度可变的元素上使用时，如果出现滚动条，加载指示可能无法完全覆盖内容。通过使用v-loading.body指令，可以确保加载效果在整个页面上显示，从而解决这一问题。
扫一扫
1553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
