element table 表格的行高以及表头样式修改，列的字段太多显示不下用...隐藏是show-overflow-tooltip

最新推荐文章于 2025-11-05 15:48:50 发布
转载 最新推荐文章于 2025-11-05 15:48:50 发布 · 1.1k 阅读 · 1

本文详细介绍如何通过header-cell-style修改表头样式，使用row-style调整表格行高，以及利用show-overflow-tooltip解决单元格内容溢出问题，帮助读者提升表格展示效果。

首先，表头样式的修改:header-cell-style

效果图

其次，表格行高的修改:row-style="rowClass"

最后，字多的解决办法show-overflow-tooltip

el-table表格表头和单元格样式配置row-style，header-row-style等等
jieweiwujie的博客
10-17 4109
<template> <div class="pluginAlertName"> <el-table highlight-current-row :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle" :header-row-style="headerRowStyle" header-row-clas.
vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查
i_am_a_div的博客
12-23 6578
vue+element实现树状表格，使用树形数据与懒加载实现树状表格的增删改查
设置element的Table表头全部或单个表头颜色header-row-style
weixin_43923808的博客
08-15 1万+
设置element的Table表头全部或单个表头颜色header-row-style。
ElementUI 设置表头样式（背景色、字体颜色、高度、居中）
热门推荐
InterestAndFun的博客
11-17 3万+
在实际的项目开发过程中，表头背景色的设置是非常常见的，然而ElementUI的样例中，没有相关的样例。这就很让人头大，真就 “高端的表格往往只需要最原始的表头样式” 无奈之下，我们只能细细研读ElementUI提供的一些 Table Attributes【表格属性】。附上官方链接：https://element.eleme.cn/#/zh-CN/component/table 我们很快就能锁定了两个属性：header-row-style，header-cell-style 把官方的话翻译成通俗易懂的话就
vxe-table 如何实现虚拟滚动和自适应行高高度，根据内容自适应单元格高度
最新发布
我的博客
11-05 529
摘要：vxe-table通过设置virtualYConfig.enabled=true启用虚拟滚动功能，默认支持自适应行高，可通过show-overflow=false关闭。实现原理是估算未渲染行的行高，通过已渲染行动态修正行高值，需要所有数据被浏览一次后才能达到稳定效果。示例代码展示了虚拟滚动表格的实现方式，包括列配置、行高自适应设置和数据加载逻辑，支持通过下拉框动态切换数据量测试性能表现。注意快速滚动时可能出现短暂的行高估算偏差现象。
Vue进阶（幺陆零）：el-table之show-overflow-tooltip 属性不生效及webstorm持续updating indices解决方法
IT全栈 华强工作室
08-22 1万+
在使用el-table表格时，有时会用到show-overflow-tooltip属性，即当单元格内容不能完全显示时显示tooltip文字提示，并且单元格里的内容显示省略号。但是在ie浏览器中有时单元格里的内容过长并且显示了省略号，但是鼠标滑上却不显示tooltip，这是因为单元格的padding-right影响到的，在css样式中添加以下代码即可： .el-table .cell, .el-table th div { padding-right: 0; } ...
<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左右
07-26
我们正在处理一个Vue和Element UI表格渲染延迟的问题。用户描述在使用`res.rows.map`处理数据时出现约2秒的延迟。我们需要分析可能的原因并提供优化方法。 可能的原因分析： 1. 数据处理耗时：在`res.rows.map`中...
el-table表头字段过多卡顿
07-05
当在一个 Vue.js 中使用 Element UI 的 `el-table` 组件处理大量表头字段时，如果字段数量过多，确实可能会出现页面卡顿的问题。这是因为每个表头项都需要渲染和维护状态，特别是当它们包含复杂或大量的数据时，计算...
vxe-grid使用问题，更新中
weixin_51263829的博客
12-10 1747
正常使用例子是，但是不生效。
<template> <div class="project-management-block"> <!-- 弹窗组件 --> <side-slope-dialog :visible="dialogVisible" :mode="currentMode" :initial-form="currentForm" @update:visible="dialogVisible = $event" @success="handleDialogSuccess" /> <div class="project-management-block--header"> <el-form size="mini" :inline="true" class="fr ml10" align="left"> <el-input v-model="searchParams.projectName" placeholder="项目名称或编号" size="mini" clearable @clear="resetSearch" style="width: 140px;" class="mr10" /> <el-select v-model="searchParams.status" placeholder="项目状态" size="mini" clearable @clear="resetSearch" style="width: 140px;" class="mr10"> <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" filterable /> </el-select> <el-date-picker v-model="searchProjectDate" value-format="timestamp" size="mini" class="mr10" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> <el-button type="primary" size="mini" style="width: 80px;" @click="handleSearch" class="mr10" >查询 </el-button> <el-button type="success" size="mini" style="width: 80px;" @click="openCreateDialog" class="mr10" >新建 </el-button> </el-form> </div> <div class="project-management-block--content" > <!-- 项目数据表格 --> <el-table :data="tableData" border style="width: 100%; flex: 1;" height="100%" > <el-table-column label="序号" type="index" width="120"> </el-table-column> <el-table-column label="项目名称" prop="projectName" width="250"> </el-table-column> <el-table-column label="项目编号" prop="projectCode" width="220"> </el-table-column> <el-table-column label="项目周期" width="250"> <template slot-scope="scope"> {{ scope.row.projectStartDate ? formatDateRange(scope.row.projectStartDate, scope.row.projectEndDate) : '' }} </template> </el-table-column> <el-table-column label="项目状态" width="150"> <template slot-scope="scope"> {{ scope.row.status ? getStatusText(scope.row.status) : '' }} </template> </el-table-column> <el-table-column label="边坡总数" prop="sideSlopeTotalCount" width="150"> </el-table-column> <el-table-column label="已完成边坡数" prop="sideSlopeCompleteCount" width="194"> </el-table-column> <el-table-column label="完成率" width="150"> <template slot-scope="scope"> {{ scope.row.sideSlopeTotalCount ? calculateCompletionRate( scope.row.sideSlopeCompleteCount, scope.row.sideSlopeTotalCount ) : '' }} </template> </el-table-column> <el-table-column label="操作" width="195"> <template slot-scope="scope"> <div v-if="scope.row.id" style="display: flex; justify-content: center;"> <el-button size="mini" type="primary" @click="openViewDialog(scope.row)" style="padding: 4px 8px; font-size: 12px" >查看 </el-button> <el-button size="mini" type="info" @click="openEditDialog(scope.row)" style="padding: 4px 8px; font-size: 12px" >编辑 </el-button> <el-button size="mini" type="danger" @click="deleteItem(scope.row)" style="padding: 4px 8px; font-size: 12px" >删除 </el-button> </div> </template> </el-table-column> </el-table> </div> <div class="project-management-block--footer"> <el-pagination background layout="total,prev, pager, next,jumper" :current-page.sync="pageParams.pageNo" :page-size="pageParams.pageSize" :total="pageParams.total"/> </div> </div> </template> <script> // 导入模块 import SideSlopeDialog from './SideSlopeDialog.vue' // 项目详情弹窗组件 import { mapCfg } from '@/utils' // 字典配置映射工具 //接口 import { getPeriodicInspectionPageList, deletePeriodicInspection } from '../../api/testProject' // 组件定义 export default { name: 'ProjectManagement', // 组件名称 components: { SideSlopeDialog // 注册弹窗组件 }, // 数据模型 data() { return { // 搜索参数对象 searchParams: { projectName: '', // 项目名称/编号搜索词 status: '', // 项目状态筛选值 projectStartDate: '', // 项目开始日期 projectEndDate: '' // 项目结束日期 }, // 日期范围选择器绑定值 searchProjectDate: [], // 项目状态下拉选项 statusOptions: [], // 表格数据源 tableData: [], // 分页参数 pageParams: { pageNo: 1, // 当前页码 pageSize: 10, // 每页条数 total: 0 // 总数据量 }, // 弹窗控制参数 dialogVisible: false, // 弹窗显示状态 currentMode: '', // 弹窗模式: 'create'/'edit'/'view' currentForm: null // 当前表单数据 } }, // 监听器 watch: { //监听日期范围选择器变化：将选择器值同步到搜索参数对象 searchProjectDate(newVal) { if (newVal && newVal.length === 2) { this.searchParams.projectStartDate = newVal[0] this.searchParams.projectEndDate = newVal[1] } else { this.searchParams.projectStartDate = '' this.searchParams.projectEndDate = '' } } }, // 生命周期钩子 async created() { // 初始化状态选项 this.getStatus() // 加载表格数据 this.loadTableData() }, // 方法/函数 methods: { // 工具方法 //根据状态值获取状态文本 getStatusText(statusValue) { const option = this.statusOptions.find((opt) => opt.value === statusValue) return option ? option.label : '' }, //格式化日期范围 formatDateRange(start, end) { if (!start || !end) return '' // 截取日期部分（去除时间） const format = (dateStr) => dateStr.substring(0, 10) return `${format(start)} 至 ${format(end)}` }, //计算完成率 calculateCompletionRate(completed, total) { if (!total || isNaN(total) || total <= 0) return '0%' return `${((completed / total) * 100).toFixed(1)}%` }, // 弹窗操作方法 //创建项目弹窗 openCreateDialog() { this.currentMode = 'create' // 重置表单数据 this.currentForm = { projectCode: '', projectName: '', projectStartDate: '', projectEndDate: '', projectUser: '', remark: '', sideSlopeDetailList: [] } this.dialogVisible = true }, //编辑项目弹窗 openEditDialog(row) { this.currentMode = 'edit' // 复制当前行数据到表单 this.currentForm = { ...row, projectStartDate: row.projectStartDate, projectEndDate: row.projectEndDate } this.dialogVisible = true }, //查看项目弹窗 openViewDialog(row) { this.currentMode = 'view' // 复制当前行数据到表单 this.currentForm = { ...row, projectStartDate: row.projectStartDate, projectEndDate: row.projectEndDate } this.dialogVisible = true }, // 弹窗操作成功回调,刷新表格数据（返回第一页） handleDialogSuccess() { this.pageParams.pageNo = 1 this.loadTableData() }, // 数据操作方法 //加载表格数据,根据搜索参数和分页设置获取项目数据 async loadTableData() { // 转换日期为时间戳格式 const startTime = this.searchParams.projectStartDate ? new Date(this.searchParams.projectStartDate).getTime() : null const endTime = this.searchParams.projectEndDate ? new Date(this.searchParams.projectEndDate).getTime() : null // 构造API参数 const params = { pageNo: this.pageParams.pageNo, pageSize: this.pageParams.pageSize, searchKey: this.searchParams.projectName, status: this.searchParams.status, startTime, endTime } try { // 调用API获取项目数据 const res = await getPeriodicInspectionPageList(params) this.tableData = res.entities || [] this.pageParams.total = res.entityCount || 0 } catch (error) { console.error('加载项目列表失败', error) this.tableData = [] this.pageParams.total = 0 } }, //搜索方法重置到第一页并重新加载数据 handleSearch() { this.pageParams.pageNo = 1 this.loadTableData() }, //重置搜索条件，清空所有搜索参数并重新加载数据 resetSearch() { this.searchParams = { projectName: '', status: '', projectStartDate: '', projectEndDate: '' } this.searchProjectDate = [] this.handleSearch() }, //删除项目 async deleteItem(row) { try { // 显示确认对话框 await this.$confirm('确定要删除该项目吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) // 调用删除API await deletePeriodicInspection({ periodicId: row.id }) this.$message.success('删除成功') // 如果删除的是最后一页的最后一条，返回上一页 if (this.tableData.length === 1 && this.pageParams.pageNo > 1) { this.pageParams.pageNo -= 1 } // 重新加载数据 this.loadTableData() } catch (error) { // 用户取消删除时不显示错误 if (error !== 'cancel') { this.$message.error('删除失败') } } }, //从字典配置加载状态选项 getStatus() { try { // 获取字典配置 const dictList = mapCfg('Inspection.Periodic.PeriodicInspectionStatus')() // 转换为Element-UI需要的格式 this.statusOptions = dictList.map((item) => ({ value: item.key, label: item.value })) } catch (e) { console.error("获取状态失败", e); this.statusOptions = []; } } } } </script> <style lang="scss" scoped> .project-management-block { width: 100%; height: 100%; position: relative; background-color: #fff; &--header { height: 50px; box-sizing: border-box; padding: 10px; border-bottom: 1px solid #ebeef5; } &--content { display: block; padding: 10px; height: calc(100% - 90px); position: relative; z-index: 10; } &--footer { border-top: 1px solid #ebeef5; padding: 4px 10px 0 10px; position: relative; z-index: 11; text-align: center; } } /* 优化表格样式 */ ::v-deep .el-table { flex: 1; min-height: 0; // 防止flex布局溢出 /* 单元格样式 */ th, td { padding: 4px 0; } /* 表头样式 */ .el-table__header-wrapper { line-height: 1; th { .cell { line-height: 1.2; } } } } /* 分页组件样式优化，确保在不同缩放比例下可见 */ ::v-deep .el-pagination { padding: 4px 5px; .btn-prev, .btn-next, .el-pager li, .el-pagination__jump { min-width: 28px; height: 28px; line-height: 28px; margin: 0 2px; } .el-pagination__total, .el-pagination__jump { font-size: 12px; } } /* 响应式调整 */ @media screen and (max-width: 1200px) { .project-management-block--header .el-col { margin-bottom: 8px; } ::v-deep .el-pagination { display: flex; flex-wrap: wrap; justify-content: center; &>* { margin-bottom: 5px; } } } </style>/*-----------弹窗模块管理------------------- */ <template> <el-dialog :title="dialogMode === 'create' ? '新建' : dialogMode === 'edit' ? '修改' : '查看'" :visible.sync="dialogVisible" :modal-append-to-body="true" append-to-body :close-on-click-modal="false" custom-class="fixed-height-dialog" width="60%" top="5vh"> <el-form label-width="80px" ref="formRef" :model="currentForm" style="height: 100%; display: flex; flex-direction: column;" :rules="rules"> <!-- 项目信息区域 --> <div class="formBorder"> <el-row :gutter="10"> <el-col :span="6"> <el-form-item size="mini" label="项目名称" prop="projectName"> <el-input v-model="currentForm.projectName" clearable style="width:100%" size="mini" :disabled="dialogMode === 'view'" > </el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item size="mini" label="项目编号" prop="projectCode"> <el-input v-model="currentForm.projectCode" clearable style="width:100%" size="mini" :disabled="dialogMode === 'view'" > </el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item size="mini" label="项目周期" prop="projectDate"> <el-date-picker v-model="projectDate" range-separator="→" start-placeholder="请选择开始日期" end-placeholder="请选择结束日期" type="daterange" size="mini" style="width: 100%;" unlink-panels :disabled="dialogMode === 'view'" > </el-date-picker> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="6"> <el-form-item label="负责人" size="mini" style="width: fit-content;"> <el-input v-model="currentForm.projectUser" clearable style="width:100%" size="mini" :disabled="dialogMode === 'view'" > </el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="项目概述"> <el-input v-model="currentForm.remark" :rows="2" :disabled="dialogMode === 'view'" > </el-input> </el-form-item> </el-col> </el-row> </div> <div class="formBorder2"> <el-container style="height: 100%;"> <el-header style="height: auto; flex-shrink: 0; padding-bottom: 10px;"> <el-row :gutter="10" type="flex" class="searchDialog"> <el-col :span="5"> <el-select v-model="filterForm.maintenanceCompanyName" placeholder="请选择管养单位" size="mini" clearable filterable @clear="resetSearch" :disabled="dialogMode === 'view'"> <el-option v-for="item in MaintenanceUnitoptions" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </el-col> <el-col :span="5"> <el-select v-model="filterForm.routeCode" placeholder="请选择路线编号" size="mini" clearable filterable @clear="resetSearch" :disabled="dialogMode === 'view'"> <el-option v-for="item in routeCodeOptions" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </el-col> <el-col :span="5"> <el-input v-model="filterForm.searchKey" placeholder="请输入边坡编号或名称" size="mini" clearable @keyup.enter.native="searchForm" @clear="resetSearch" :disabled="dialogMode === 'view'"> <i slot="suffix" class="el-input__icon el-icon-search"></i> </el-input> </el-col> <el-col :span="5"> <el-select v-model="filterForm.evaluateLevel" placeholder="请选择技术状态等级" size="mini" clearable @clear="resetSearch" :disabled="dialogMode === 'view'"> <el-option v-for="item in evaluateLeveloptions" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-col> <el-col :span="2" :offset="4"> <el-button type="primary" size="mini" style="width:100%" icon="el-icon-search" @click="searchForm" :loading="loading" :disabled="dialogMode === 'view'" >搜索 </el-button> </el-col> </el-row> </el-header> <el-main style="overflow-y: hidden;"> <el-table ref="scrollTable" v-loading="loading" style="width: 100%;" border :data="formTabledata" :row-style="{ height: '36px' }" :cell-style="{ padding: '4px 0', textAlign: 'center' }" :header-cell-style="{ height: '36px', padding: '4px 0', lineHeight: '36px', textAlign: 'center' }" @selection-change="handleSelectionChange" :row-key="getRowkey" > <el-table-column type="selection" width="55" :selectable="isRowSelectable" :reserve-selection="true" > </el-table-column> <el-table-column label="管养单位" prop="maintenanceCompanyName" width="290" show-overflow-tooltip > </el-table-column> <el-table-column label="路线编号" prop="routeCode" width="100" > </el-table-column> <el-table-column label="边坡编号" prop="sideSlopeCode" width="240" show-overflow-tooltip > </el-table-column> <el-table-column label="边坡名称" prop="sideSlopeName" width="267" show-overflow-tooltip > </el-table-column> <el-table-column label="技术状态等级" width="137"> <template slot-scope="scope"> {{ mapEvaluateLevel(scope.row.evaluateLevel) }} </template> </el-table-column> </el-table> </el-main> <!-- 分页区域 --> <el-footer style="flex-shrink: 0; padding-top: 10px;" > <el-pagination background @current-change="handleCurrentChange" :current-page="pageParams.pageNo" :page-size="pageParams.pageSize" layout="total, prev, pager, next" :total="total"> </el-pagination> </el-footer> </el-container> </div> </el-form> <!-- 弹窗底部按钮 --> <div slot="footer" class="dialog-footer" v-if="dialogMode === 'create' || dialogMode === 'edit'"> <el-button @click="dialogVisible = false" >取消 </el-button> <el-button type="primary" @click="submitForm" >提交 </el-button> </div> </el-dialog> </template> <script> import { mapCfg } from "@/utils"; import { getPeriodicInspectionSideSlopePageList, addPeriodicInspection, modifyPeriodicInspection, getSelectedPeriodicInspectionSideSlopeList } from "../../api/testProject"; import { getMaintenanceCompanyList, getRouteList } from "../../api/basicInformation"; export default { name: "SideSlopeDialog", props: { visible: Boolean, // 控制弹窗显示 mode: String, // 模式：create/edit/view initialForm: Object, // 初始表单数据 }, data() { return { isInitializingSelection: false, // 初始化状态标志 dialogVisible: this.visible, // 弹窗显示状态 dialogMode: this.mode, // 当前模式 currentForm: { ...this.initialForm }, // 当前表单数据 projectDate: [], // 项目日期范围 total: 0, // 总数据量 loading: false, // 加载状态 pageParams: { // 分页参数 pageNo: 1, pageSize: 10, }, filterForm: { // 搜索条件 maintenanceCompanyName: "", routeCode: "", searchKey: "", evaluateLevel: "", }, mulitipleSelection: [], allSelection: new Map(), MaintenanceUnitoptions: [], // 管养单位选项 routeCodeOptions: [], // 路线编号选项 formTabledata: [], // 表格数据 evaluateLeveloptions: [], // 技术状态等级选项 rules: { // 表单验证规则 projectName: [ { required: true, message: "项目名称不能为空", trigger: "blur" }, ], projectCode: [ { required: true, message: "项目编码不能为空", trigger: "blur" }, ], }, }; }, watch: { // 修复1：监听visible变化时确保加载数据 async visible(val) { this.dialogVisible = val; if (val) { // 打开对话框时重置状态 this.resetAllData(); // 关键修复：确保在创建模式外加载数据 if (this.dialogMode !== 'create' && this.currentForm.id) { // 确保在DOM更新后加载数据 await this.$nextTick(); await this.LoadListData(); } } else { // 关闭对话框时重置数据 this.resetAllData(); } }, // 修复2：监听模式变化 mode(val) { this.dialogMode = val; // 当模式从创建变为编辑/查看时，确保加载数据 if (this.dialogVisible && val !== 'create' && this.currentForm.id) { this.LoadListData(); } }, // 修复3：监听初始表单数据变化 initialForm: { deep: true, immediate: true, // 添加立即执行 async handler(val) { this.currentForm = { ...val }; this.projectDate = [val.projectStartDate, val.projectEndDate]; // 关键修复：当初始表单有ID时立即加载数据 if (this.dialogVisible && val.id && this.dialogMode !== 'create') { await this.$nextTick(); await this.LoadListData(); } } }, // 同步弹窗显示状态到父组件 dialogVisible(val) { this.$emit("update:visible", val); }, projectDate: { deep: true, handler(value) { if (value && value.length === 2) { this.currentForm.projectStartDate = value[0]; this.currentForm.projectEndDate = value[1]; } }, }, }, async created() { // 初始化数据 this.getRouteList(); await this.getEvaluateLevel(); this.getMaintenanceCompanyList(); }, methods: { handleSelectionChange(selection) { // 跳过初始化阶段的选中状态变更 if (this.isInitializingSelection) return; // 获取当前页选中项的key集合 const currentPageKeys = new Set( selection.map(row => row.sideSlopeUniqueCode) ); // 处理当前页的取消选中操作 this.formTabledata.forEach(row => { const key = row.sideSlopeUniqueCode; // 仅当行在全局选中池中但不在当前页选中集合时删除 if (this.allSelection.has(key) && !currentPageKeys.has(key)) { this.allSelection.delete(key); } }); // 添加新选中的项到全局池 selection.forEach(row => { const key = row.sideSlopeUniqueCode; if (!this.allSelection.has(key)) { this.allSelection.set(key, row); } }); // 更新当前页选中引用 this.mulitipleSelection = selection; }, getRowkey(row) { return row.sideSlopeUniqueCode; }, // 判断行是否可选（查看模式禁用选择） isRowSelectable(row, index) { return this.dialogMode !== "view"; }, // 获取管养单位列表 async getMaintenanceCompanyList() { const res = await getMaintenanceCompanyList(); this.MaintenanceUnitoptions = res.map((item) => ({ value: item, label: item, })); }, // 获取路线列表 async getRouteList() { const res = await getRouteList(); this.routeCodeOptions = res.map((item) => ({ value: item.id, label: item.routeCode, })); }, // 搜索方法 searchForm() { // this.showSelectedOnly = false, this.pageParams.pageNo = 1; this.LoadListData(); }, // 重置搜索条件 resetSearch() { // this.showSelectedOnly = true, this.filterForm = { maintenanceCompanyName: "", routeCode: "", searchKey: "", evaluateLevel: "", }; this.pageParams.pageNo = 1; this.LoadListData(); }, // 重置组件状态 resetAllData() { this.resetSelection(); this.formTabledata = []; // 清空表格数据 this.total = 0; // 重置总条数 this.pageParams = { // 重置分页 pageNo: 1, pageSize: 10 }; // 重置搜索条件（可选） this.filterForm = { maintenanceCompanyName: "", routeCode: "", searchKey: "", evaluateLevel: "" }; }, // 修改原有方法 resetSelection() { this.allSelection.clear(); this.allSelection = new Map(); if (this.$refs.scrollTable) { this.$refs.scrollTable.clearSelection(); } }, // 映射技术状态等级 mapEvaluateLevel(level) { const option = this.evaluateLeveloptions.find( (item) => item.value === level ); return option.label; }, // 加载表格数据 async LoadListData() { this.loading = true; try { const params = { orgId: this.filterForm.maintenanceCompanyName, routeId: this.filterForm.routeCode, searchKey: this.filterForm.searchKey, evaluateLevel: this.filterForm.evaluateLevel, pageSize: this.pageParams.pageSize, pageNo: this.pageParams.pageNo, }; // 获取表格数据 const res = await getPeriodicInspectionSideSlopePageList(params); this.formTabledata = res.entities; this.total = res.entityCount; // 处理非创建模式的数据加载 if (this.dialogMode !== 'create' && this.currentForm.id) { // 首次加载时获取所有选中项 if (this.pageParams.pageNo === 1) { const selected = await getSelectedPeriodicInspectionSideSlopeList({ periodicId: this.currentForm.id, pageSize: 10000, // 获取所有选中项 pageNo: 1 }); // 重置全局选中池 this.allSelection.clear(); this.mulitipleSelection = selected.entities; // 存储全局选中状态 this.mulitipleSelection.forEach(item => { this.allSelection.set(item.sideSlopeUniqueCode, item); }); } // 设置当前页选中状态 this.isInitializingSelection = true; this.$nextTick(() => { this.formTabledata.forEach(row => { if (this.allSelection.has(row.sideSlopeUniqueCode)) { this.$refs.scrollTable.toggleRowSelection(row, true); } }); this.isInitializingSelection = false; }); } } catch (error) { console.error("加载数据失败:", error); this.$message.error("加载数据失败"); } finally { this.loading = false; } }, // 当前页码变化 handleCurrentChange(val) { this.pageParams.pageNo = val; this.LoadListData(); }, // 获取技术状态等级选项 async getEvaluateLevel() { const levelList = await mapCfg("Inspection.Regular.RegularEvaluateLevel")(); this.evaluateLeveloptions = levelList.map((item) => ({ value: item.key, label: item.value, })); }, // 提交表单 async submitForm() { this.$refs.formRef.validate(async (valid) => { if (valid) { // 验证是否选择了边坡 const selectedItems = Array.from(this.allSelection.values()); if (this.allSelection.size === 0) { this.$message.warning("请至少选择一个边坡"); return; } // 构造提交参数 const params = { ...this.currentForm, sideSlopeDetailList: selectedItems.map(item => ({ sideSlopeUniqueCode: item.sideSlopeUniqueCode, evaluateLevel: item.evaluateLevel, evaluateDate: item.evaluateDate || undefined })), }; // 根据模式选择操作 const action = this.dialogMode === "create" ? addPeriodicInspection : modifyPeriodicInspection; // 执行操作 try { const success = await action(params); if (success) { this.$message.success( this.dialogMode === "create" ? "新建成功" : "修改成功" ); this.$refs.scrollTable.clearSelection(); this.$emit("success"); this.dialogVisible = false; } else { this.$message.error("操作失败"); } } catch (error) { this.$message.error(error.message || "操作失败"); } } }); } }, }; </script> <style lang="scss" scoped> /* 修复1：弹性容器最小高度约束 */ :deep(.fixed-height-dialog), .formBorder2, .formBorder2 .el-container, .formBorder2 .el-main { min-height: 0 !important; } /* 表格行高优化 */ :deep(.el-table) { .el-table__row { height: 36px !important; td { padding: 4px 0 !important; } } .el-table__header { th { padding: 4px 0 !important; .cell { line-height: 28px !important; } } } /* 确保内部滚动 */ .el-table__body-wrapper { overflow-y: auto !important; max-height: calc(100vh - 400px) !important; } } /* 表单区域固定 */ .formBorder { position: relative; ///为伪元素提供定位上下文 border: thin dotted black !important; padding: 10px !important; margin-top: 15px !important; flex-shrink: 0 !important; height: auto !important; overflow: visible !important; margin-bottom: 15px !important; /* 边框的文字 */ &::before { content: "项目信息"; position: absolute; top: -8px; //调整到更合适的位置 left: 15px; //向右移动避免遮挡 background-color: #fff; //背景色需与页面背景一致 padding: 0 8px; font-size: 13px; color: #606266; z-index: 10; //提高层级确保显示 font-weight: 500; //加粗文字 pointer-events: none; //防止点击穿透 } } .formBorder2 { position: relative; border: thin dotted black; padding: 10px; flex: 1; min-height: 0; overflow: hidden; // 保留 display: flex; flex-direction: column; padding-top: 25px; // 新增 &::before { content: "待检边坡"; position: absolute; top: 5px; // 调整到新增的padding区域内部 left: 15px; background-color: #fff; padding: 0 8px; font-size: 13px; color: #606266; z-index: 1000; font-weight: 500; pointer-events: none; } .el-container { height: auto !important; // 覆盖行内样式 flex: 1; // 填满剩余空间 display: flex; flex-direction: column; min-height: 0; .el-header { flex-shrink: 0; height: auto !important; padding-bottom: 10px; } .el-main { flex: 1; overflow: hidden; position: relative; padding: 0; } .el-footer { flex-shrink: 0; padding-top: 10px; } } } // 弹窗底部按钮区域 .dialog-footer { padding: 10px 20px; border-top: 1px solid #ebeef5; text-align: center; } // 搜索区域样式 .searchDialog { margin-top: 5px; } // 空数据样式 :deep(.el-table__empty-block) { min-height: 200px; display: flex; justify-content: center; align-items: center; } // 分页样式 :deep(.el-pagination) { padding: 5px 0; } // 表格高度控制 :deep(.el-table) { height: 100% !important; .el-table__body-wrapper { overflow-y: auto !important; } } </style> currentForm: { projectCode: '', // 项目编号 projectName: '', // 项目名称 projectStartDate: '', // 开始日期 projectEndDate: '', // 结束日期 projectUser: '', // 项目负责人 remark: '', // 备注 sideSlopeDetailList: [] // 边坡详情列表 },是新建，修改用的字段 帮我再组件内定义 而不是在父组件定义
09-04
但是注意：在子组件中，我们通过`currentForm: { ...this.initialForm }`来初始化，这会导致如果父组件传递的initialForm中缺少某些字段，那么这些字段就不会出现在子组件的currentForm中。 因此，为了确保子组件...
element show-overflow-tooltip当内容过长被隐藏时显示 tooltip时候内容不换行，下拉菜单select内容太长不出现滚动条
weixin_40011543的博客
04-21 5015
// 解决列表数据过长poper一行显示太长不美观问题 .el-tooltip__popper{ max-width: 200px; } // 解决下拉菜单选项太长，自动撑开不出现滚动条问题 .el-select-dropdown{ max-width: 243px; } .el-select-dropdown__item{ display: inline-block; } .el-select-...
el-table之show-overflow-tooltip 属性不生效
qqpaowenquan的博客
03-06 5114
在使用el-table表格时有时会用到show-overflow-tooltip属性，既当单元格内容不能完全显示时显示tooltip文字提示，并且单元格里的内容显示省略号。但是在ie浏览器中有时单元格里的内容过长并且显示了省略号，但是鼠标滑上确不显示tooltip，这是因为单元格的padding-right影响到的，在css样式中添加以下代码即可： .el-table .cell, .el-tab...
el-table中show-overflow-tooltip属性未生效
蚂蚁搬砖我砌墙
10-27 3527
el-table中show-overflow-tooltip属性未生效
el-table中的show-overflow-tooltip显示的省略号，但是放上去没有tooltip提示
eight_eyes_fish的博客
05-09 709
最后发现罪魁祸首竟然是backdrop-filter: blur(5px);然后去修改表格的z-index，无论改到多高还是不生效。tootip没提示大概率是优先级的问题，先去排查样式。只能说谨慎使用这个backdrop-filter。
Element-UI el-table-column show-overflow-tooltip无效 tooltip无效
foreverhot1019的博客
03-07 7977
RequireJs 按需加载Element-UI+Vue 需要注意Element-UI 源码里会require('vue'), 如果RequireJs-config配置了paths: {vue:'vue.min'}，path里的vue 起了别名（如Vue），el-table-columnshow-overflow-tooltip会不起作用，其实 不光是el-table-column，所有 ...
Element UI - el-table-column 属性之 show-overflow-tooltip 爬坑
08-17 1万+
在 Element UI 框架中，el-table-column 属性show-overflow-tooltip 意思是：当内容过长被隐藏时显示 tooltip（默认值为 false）。但是有时候会出现一些莫名其妙的BUG，比如，和 el-form 配合使用时，鼠标碰上去会显示报错的信息而不是内容的信息，还有一些很奇葩的显示。所以本文给大家带来一个替代方案... 解决方案：el-to......
学习使用 Element UI 的 el-table 样式 show-overflow-tooltip当内容过长被隐藏时显示 tooltip
李长渊的博客
05-30 3126
学习使用 Element UI 的 el-table 样式 show-overflow-tooltip当内容过长被隐藏时显示 tooltip
el-table表格使用插槽show-overflow-tooltip属性失效
weixin_46054723的博客
04-20 3011
需求是直接在表格上修改内容，所以在表格中使用了插槽，将输入框插入表格中。当内容过长时，用户想鼠标移入出现气泡完整查看内容。
vue2 el-table 添加show-overflow-tooltip后 如果数据全是数字鼠标悬浮展示不换行且展示不全怎么解决
06-13
通过上述方法，可以解决`show-overflow-tooltip`属性在数字内容下不换行的问题[^1]。 #### 解决方案：调整`show-overflow-tooltip`的行为 如果希望继续使用`show-overflow-tooltip`属性，可以通过CSS强制设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值