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,
})

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

相关推荐
LoveEate1 天前
vue 在el-tabs动态添加添加table
javascript·vue.js·elementui
krifyFan1 天前
vue3+elementPlus el-date-picker 自定义禁用状态hook 实现结束时间不能小于开始时间
前端·vue.js·elementui
一颗努力的大土豆1 天前
关于解决switch开关属性中active-value=“1“为数值形失败的问题
javascript·vue.js·elementui
Liu.7741 天前
vue3 中实现 Element Plus 表格合并
javascript·vue.js·elementui
SevgiliD1 天前
解决使用 fixed固定列时el-table导致纵向滚动条问题
前端·vue.js·elementui
dreams_dream2 天前
Vue树选择
javascript·vue.js·elementui
dreams_dream3 天前
树形表格示例
javascript·vue.js·elementui
蓝胖子的多啦A梦12 天前
【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案
前端·javascript·elementui·html·前端页面适配
wangbing112513 天前
界面规范11-对话框
javascript·vue.js·elementui