element plus table 表格操作列根据按钮数量自适应宽度

直接上代码

在utils直接封装autoWidthHeaderRender.js文件

复制代码
/**
 * 表格操作列自适应宽度计算函数
 * @param {string} className - 操作栏容器类名
 * @param {number} padding - 额外padding宽度
 * @param {number} minWidth - 最小宽度
 * @returns {number} 计算后的宽度
 */
export const calculateOperationWidth = (className = 'operation-cell', padding = 30, minWidth = 120) => {
  try {
    const cells = document.getElementsByClassName(className)
    let maxWidth = minWidth
    
    Array.from(cells).forEach(cell => {
      if (cell.offsetParent !== null) { // 只计算可见元素
        const buttons = cell.querySelectorAll('.el-button')
        let totalWidth = 0
        
        buttons.forEach(button => {
          // 计算每个按钮的宽度(包括margin)
          const style = window.getComputedStyle(button)
          const margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight)
          totalWidth += button.offsetWidth + margin
        })
        
        maxWidth = Math.max(maxWidth, totalWidth + padding)
      }
    })
    
    return maxWidth
  } catch (error) {
    console.error('操作栏宽度计算错误:', error)
    return minWidth
  }
}

页面里使用 增加class style

复制代码
<el-table
      ref="tableRef"
      border
      v-loading="loading"
      :data="customerList"
      @selection-change="handleSelectionChange"
    >
<el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        :width="operationWidth"
        fixed="right"
      >
        <template #default="scope">
          <div
            class="operation-cell"
            style="white-space: nowrap; display: inline-block"
          >
            <el-button
              link
              type="primary"
              icon="Memo"
              v-if="scope.row.openAccStatus == 'OPENING_ACC'"
              @click="handleValid(scope.row)"
              v-hasPermi="['business:company:valid']"
              >去验证</el-button>
          </div>
        </template>
      </el-table-column>
      </el-table>
import { calculateOperationWidth } from '@/utils/autoWidthHeaderRender'

const operationWidth = ref(120)

// 计算并更新操作列宽度
const updateOperationWidth = async () => {
  await nextTick() // 确保DOM已更新
  operationWidth.value = calculateOperationWidth('operation-cell', 30, 120)
}

// 监听数据变化
watch(() => customerList.value, updateOperationWidth, {
  deep: true,
  immediate: true,
})

这样就可以自适应宽度了,大体思路是这样

相关推荐
ikun778g1 天前
elemen ui Table表格中添加图片
前端·ui·elementui
程序员的世界你不懂1 天前
【Flask】测试平台开发,应用管理模块实现-第十一篇
vue.js·elementui·flask
chxii2 天前
7.2elementplus的表单布局与模式
javascript·vue.js·elementui
太过平凡的小蚂蚁3 天前
Kotlin 协程作用域
vue.js·elementui·kotlin
小只笨笨狗~5 天前
el-dialog宽度根据内容撑开
前端·vue.js·elementui
爱学大树锯5 天前
【Ruoyi 解密 - 08. 前端探秘1】------ 从“交互原理”到“开发逻辑”,后端也能看懂的前端实战指南
前端·elementui·vue
chxii8 天前
6.3Element UI 的表单
javascript·vue.js·elementui
chxii8 天前
6.4 Element UI 中的 <el-table> 表格组件
vue.js·ui·elementui
陪我一起学编程10 天前
创建Vue项目的不同方式及项目规范化配置
前端·javascript·vue.js·git·elementui·axios·企业规范
乐~~~12 天前
el-date-picker type=daterange 日期范围限制
javascript·vue.js·elementui